直接在dom路径中查找元素

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路径中.

如何在单击按钮时将相对remainingdiv增加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

你可以找到包含.remainingdiv 的最近的父...

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

演示http://jsfiddle.net/gaby/ujW2e/