Найти элемент не прямо в пути

Question

У меня есть структура dom, которая выглядит примерно так (хотя и намного сложнее)

<div>
  <div>
    <div>
      <div class="remaining">132</div>
    </div>
  </div>
  <div>
    <button>clicky</button>
  </div>
</div>
<div>
  <div>
    <div>
      <div class="remaining">142</div>
    </div>
  </div>
  <div>
    <button>clicky</button>
  </div>
</div>
<div>
  <div>
    <div>
      <div class="remaining">152</div>
    </div>
  </div>
  <div>
    <button>clicky</button>
  </div>
</div>

Как вы можете видеть, div с классом remaining не находится непосредственно на пути dom относительногокнопок.

Как можно при нажатии кнопки увеличить относительный remaining деление на 1?

Answer 1

Дайте общему родителю некоторый значимый класс:

<div class="meaningful">
  <div>
    <div>
      <div class="remaining">152</div>
    </div>
  </div>
  <div>
    <button>clicky</button>
  </div>
</div>

Тогда вы можете использовать .closest() и .find():

$('button').click(function() {
    var $remaining = $(this).closest('.meaningful').find('.remaining');
    // change text...
});

Answer 2

Вы можете найти ближайшего родителя, который содержит .remaining div ..

$('button').click(function() {
    var $remain = $(this).closest(':has(div.remaining)').find('.remaining');
    $remain.text( parseInt($remain.text(),10) + 1);
});

демо http://jsfiddle.net/gaby/ujW2e/

Answer 3

$('button').click(function() {     
    var workDiv = $(this).parents().find('.remaining').first();
    workDiv.text(parseInt(workDiv.text())+1);
}); 

Answer 4

$('button').click(function() {
   var remainingdiv = $(this).closest('.meaningful').find('.remaining');
   remainingdiv.html(parseInt(remainingdiv.html(), 10) + 1);
}