CODEWITHSUNDEEP
jquery
Gaurav
Gaurav

Reputation: 149

Getting value of nearest item using jquery

I have following HTML code

<div class="product-default inner-quickview inner-icon inner-icon-inline inner-btn">
            <figure>
                <a href="http://some-url">
                    <img src="http://www.example.com/images/image.jpg">
                </a>
                <div class="btn-icon-group">
                    <button class="btn-icon btn-add-cart" value="46" data-toggle="modal" data-target="#addCartModal"><i class="icon-bag"></i></button>
                </div>
            </figure>
        </div>

I want to get the value of src on the button with the class btn-add-cart click. How can I achieve that?

I have tried the following:

$(this).closest("a").find("img").attr('src');

Upvotes: 0

Views: 65

Answers (1)

Carsten Massmann
Carsten Massmann

Reputation: 28206

The jQuery method .closest() will always give you the closest parent element. Try the following:

$('.product-default').on('click','button',function(){ // delegated event handling
  console.log( $(this).closest('figure').find('img').attr('src') )
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-default inner-quickview inner-icon inner-icon-inline inner-btn">
  <figure>
   <a href="http://some-first-url">
    <img src="http://www.example.com/images/image_one.jpg">
   </a>
   <div class="btn-icon-group">
    <button class="btn-icon btn-add-cart" value="46" data-toggle="modal" data-target="#addCartModal"><i class="icon-bag">click me</i></button>
   </div>
  </figure>
  <figure>
   <a href="http://some-second-url">
    <img src="http://www.example.com/images/image_two.jpg">
   </a>
   <div class="btn-icon-group">
    <button class="btn-icon btn-add-cart" value="46" data-toggle="modal" data-target="#addCartModal"><i class="icon-bag">click me</i></button>
   </div>
  </figure>
</div>

This will move up to the closest parent element being a <figure> and will then go down again to find any <img> element.

Upvotes: 2

Related Questions