jquery.closestchild demo

This is a demo of the jquery.closestchild plugin.

Open the source of this page to dig into details or use a copy of this demo on JSBin to get your hands dirty.

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.