Question

function addcls() {
        $('#slider ul li.current').removeClass('current');
        $(this).closest('li').addClass('current');
    };

 setInterval(function () {
        addcls();
       }, 3000);

以上代码从第一个li标签中删除“current”类，但不插入下一个li标签。如何通过设置间隔实现此目的

HTML

<ul>
        <li class="current">SLIDE 1</li>
    <li class="" style="background: #aaa;">SLIDE 2</li>
    <li class="">SLIDE 3</li>
    <li class="" style="background: #aaa;">SLIDE 4</li>
  </ul>

Answer 1

$(this)在你的函数中没有意义，是吗？

function addcls() {
        var current = $('#slider ul li.current').removeClass('current'),
            next = current.next().length ? current.next() : current.siblings().filter(':first');
        next.addClass('current');
    };

 setInterval(function () {
        addcls();
       }, 3000);

Answer 2

.next()

function addcls() {
        var $this = $('#slider ul li.current').removeClass('current');
        $this.next('li').addClass('current');
    };

<小时/> 如果你想循环通过

function addcls() {
    var $this =$('#slider ul li.current').removeClass('current');
    if ($this.next('li').length > 0) { //if next element is there 
        $this.next('li').addClass('current'); //add class to next to next element 
    } else { 
        $this.closest('ul').find('li:eq(0)').addClass('current'); //else add class to 1 st element 
    }
};

Answer 3

closest() 遍历DOM树并获得第一个匹配的祖先。

您的列表项是彼此的兄弟姐妹，因此您可以使用 siblings() ：

$(this).siblings('li').addClass('current');

使用设置的间隔时间将动态类添加到ul li

3 个答案: