Получение стоимости ближайшего товара с помощью jquery

Question

У меня следующий код HTML

<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>

Я хочу получить значение src на кнопке с классом btn-add-cart click. Как я могу этого добиться?

Я пробовал следующее:

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

Answer 1

Метод jQuery .closest() всегда будет давать вам ближайший родительский элемент. Попробуйте следующее:

$('.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>

Это переместится вверх к ближайшему родительскому элементу, являющемуся <figure>, а затем go снова вниз, чтобы найти любой элемент <img>.