Question

I have the following (abbreviated) HTML:

<div class="root">
  <div class="body">
    <div class="content">
      <ul>
        <li>A</li>
        <li>B</li>
        <li class="active">C</li>
      </ul>
    </div>
    <div class="content">
      <ul>
        <li>D</li>
        <li>E</li>
        <li>F</li>
      </ul>
    </div>
  </div>
</div>

I am using jQuery to move .active down the unordered list. When the end of the unordered first list is reached (C), I want .active to move down to the next div, starting at D.

How can I use jQuery to select the first li, after the last occurrence of .active, regardless of who’s child it is without resorting to (in my opinion) fragile constructs such as parent().parent() for example?

Answer 1

Try this, which also handles the movement within a single list.

var $a = $('.active');
var $n = $a.next('li');

if ($n.length == 0) {
    $n = $a.closest('.content')  // first ancestor matching class
         .next('.content')       // next sibling also matching class
         .find('li').first();    // first <li> descendent therein
}
$a.removeClass('active');
$n.addClass('active');

working demo at http://jsfiddle.net/alnitak/Hdy4A/