Question

如何在课程活跃的dt之后获得下一个dt？

我的HTML ::

<dt class="active">...</dt>
<dd>...</dd>

<dt>...</dt>
<dd>...</dd>

<dt>...</dt>
<dd>...</dd>

看，我有这个功能：

    function slideShow() {
    var active  = $('dl dt.active',ctx);
    active.next('dt').addClass('active');
};
window.setInterval(slideShow, 5000);

应该很简单。每一秒，DOM显示活动dt所在的位置，并设置此活动的下一个dt。

Answer 1

一种可能的解决方案是

$('.active').nextUntil('dt').last().next()

演示：Fiddle

幻灯片放映

var $dts = $('dl dt');
function slideShow() {
    var index = $dts.index($dts.filter('.active').removeClass('active')) + 1;
    var active = $dts.eq(index > 0 && index < $dts.length ? index : 0);
    active.addClass('active');
};
window.setInterval(slideShow, 1000);

演示：Fiddle

Answer 2

它不是那么简单，您可以将下一个兄弟选择器~与eq()结合使用来选择元素：

$(".active ~dt:eq(0)")

JS小提琴： http://jsfiddle.net/hsAA7/

在活动后获取下一个元素

2 个答案: