Получение текста () объекта вверх по дереву DOM? - Jquery

Question

У меня есть эта разметка (удалена вся ненужная информация)

<li>
<a></a>
<strong class="listingAmount">1</strong> 
<strong class="listingPrice">10</strong> 
<form class="marketListing">
<select>
</select>
<input />
</form>
</li>

Я пытаюсь получить значения .listingAmount и .listingPrice для change event поля выбора в jquery.Я перепробовал множество методов с участием .parent(), .prev(), .closest() и многих других и просто не могу этого понять!

Мой jquery до сих пор,

$('.marketListing select').change(function() {
    var price = $(this).parent().prev('.listingPrice').text();
    var amount = $(this).parent().prev('listingAmount').text();
    alert(price);
    alert(amount);
});

Как я могу получить значения, которые я хочу, предшествующие select?

Спасибо

Answer 1

Функция, которую вы ищете: prevAll, а не prev. Функция prev будет искать только предыдущий узел, а prevAll будет искать все предыдущие узлы. Вот действующая скрипка

Скрипка: http://jsfiddle.net/UasBq/

$('.marketListing select').change(function() {
    var price = $(this).parent().prevAll('.listingPrice').text();
    var amount = $(this).parent().prevAll('.listingAmount').text();
    alert(price);
    alert(amount);
});

Answer 2

Я думаю, вы делаете что-то вроде:

$('.marketListing select').change(function() {
  var price = $(this).parents('form').prevAll('.listingPrice:first').text();
  var amount = $(this).parents('form').prevAll('.listingAmount:first').text();
  ...
  ...
});

В результате выборка найдет первый родительский элемент FORM. Затем он просканирует всех своих предыдущих братьев и сестер и найдет первый .listingPrice (и .listingAmount).

Я использую: сначала, если существует более одного класса .listingPrice, который является родственным для формы. Я не добавил: сначала к родителям («форма»), потому что, если у вас есть вложенные элементы формы, у вас есть большие проблемы: P

Answer 3

Я думаю, что вы близко:

$('.marketListing select').change(function() {
  var li = $(this).closest('li');

  var price = $('.listingPrice', li).text();
  var amount = $('.listingAmount', li).text();
  alert(price);
  alert(amount);
});

Answer 4

Я бы, вероятно, поместил класс на <li>, чтобы у меня был известный и легко найти контейнер, затем вы подойдете к <li> и вернетесь вниз, чтобы найти то, что вас интересует :

<ul>
    <li class="container">
        <!-- ... -->
    </li>
</ul>

А затем простая комбинация closest и find дает вам то, что вы хотите:

$('select').change(function() {
    var $cont  = $(this).closest('.container');
    var amount = $cont.find('.listingAmount').text();
    var price  = $cont.find('.listingPrice').text();
    // ...
});

Демо: http://jsfiddle.net/ambiguous/kAejF/

Преимущество этого по сравнению с попыткой использования prev и prevAll заключается в том, что ваш jQuery очень слабо связан с вашим HTML: вам нужно только простое сдерживание, вложенность и внутренняя структура не имеют значения.