jquery.closestchild demo

This is a demo of the jquery.closestchild plugin.

Below is a nested tree of identical HTML modules. Each module has this structure:

<div class="module">
    module
    <div class="module-title">title</div>
    <div class="module-foo">
      foo
      <div class="module-bar">bar</div>
    </div>
    <div class="module-children">
      children
      <!-- child modules go here -->
    </div>
  </div>

One module has been marked with a #target id, it is highlighted with a red outline via CSS. The following code is applied to the highlighted module:

$('#target')
    .closestChild('.module-bar')
    .css('background-color', 'red');

Note that only target's own instance of .module-bar is highlighted with red background.