Как выбрать несколько селекторов в find()

Question

Всем привет

Помогите пожалуйста решить простую задачу.

Нужно вывести в консоль два значения родительского элемента, это название и цену. У меня получается вывести только одно значение. Подскажите как можно улучшить код, чтобы выводить название и цену вместе. Заранее спасибо!

$(function(){
    $(".cart button").click(function(){
    console.log( $(this).parent().find("h3").html())
  });
})

<div class="cart">
  <h3>Яблоки</h3>
  <p>Цена: <span>50</span>руб.</p>
  <button>Добавить</button>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Вариант написать второй console.log - мне не подходит

Answer 1

Селектор пишется как и в css:

$(function() {
  $(".cart button").click(function() {
    console.log($(this).parent().find("h3, p > span").text())
  });
})

<div class="cart">
  <h3>Яблоки</h3>
  <p>Цена: <span>50</span>руб.</p>
  <button>Добавить</button>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Или вот так:

$(function() {
  $(".cart button").click(function() {
    console.log($(this).parent().find("h3").text(), $(this).parent().find("p > span").text())
  });
})

<div class="cart">
  <h3>Яблоки</h3>
  <p>Цена: <span>50</span>руб.</p>
  <button>Добавить</button>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Как выбрать несколько селекторов в find()

Ответы (1 шт):