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

试试这个，它也会在单个列表中处理的移动。

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

http://jsfiddle.net/alnitak/Hdy4A/
的工作演示

Answer 2

这就是你所需要的一切

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

JSFiddle

编辑使代码更通用以处理完整的流程

在选择器之后使用jQuery获取另一个父级的子级

2 个答案: