掌握jQuery的另一位家长的孩子选择后

Question

我有以下的（略）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> 

我使用jQuery移动.active下的无序列表。当到达无序第一列表的末尾（C）时，我想要.active下移到下一个div，从D开始。

我如何使用jQuery选择第一li，后最后的.active发生，不管谁的孩子是没有诉诸（在我看来）脆弱的结构，如parent().parent()为例？

Answer 1

试试这个，它也处理的移动一个列表。在http://jsfiddle.net/alnitak/Hdy4A/

Answer 2

这

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'); 

工作演示是所有你需要

var $active = $('li.active'); 
$active.removeClass('active') 
    .next('li') 
    .add($active.parents('.content:first') 
     .next('.content') 
     .find('li:first')) 
    .first().addClass('active'); 

JSFiddle

---

编辑使代码更通用处理的全流量