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>

正如您所看到的，具有类remaining的div不会直接位于相对按钮的dom路径中。

如何点击该按钮，将相对remaining div增加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);
});

demo 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);
}

直接在dom路径中查找元素

4 个答案: