Question

I have a dom structure that looks something like (although a lot more complex)

<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>

As you can see the divs with class remaining arn’t directly in the dom path of the relative buttons.

How can I when the button is clicked, increment the relative remaining div by 1?

Answer 1

You can find the nearest parent that contains a .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/