问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery定时遍历元素的问题

头像
psy
    392143036

    刚学JQuery,希望实现这样一个效果：在如下的标签中，循环遍历one,two,three,four，每隔1秒钟设置下一个标签的属性，实现类似于“轮询”的效果。

    <div id="radio">
    <div id="one" class="hilite">One</div>
    <div id="two">Two</div>
    <div id="three">Three</div>
    <div id="four">Four</div>
</div>

    我写了一个实现，但是似乎不起作用。请问是什么地方出现了问题？另外还有更佳的实现方式吗?

    $(document).ready(function () {
    function select($pri) {
        var $current = $pri.next();
        $current.radioClass('hilite');
        setTimeout(function() { select($current); }, 1000);
    }($('#one'));
});

$.fn.radioClass = function (cls) {
    return this.siblings().removeClass(cls).end().addClass(cls);
}
    javascriptjquery
    阅读 4.1k
    4 个回答
    得票最新
    头像
    kikong
      19.1k31320
      ✓ 已被采纳

      1.

      $(document).ready(function () {
    function select($pri) {
        var $current = $pri.next();
        $current.radioClass('hilite');
        setTimeout(function() { select($current); }, 1000);
    }($('#one'));
    //这个写法是有问题的
    //上述的写法只是 声明了一个select函数，进行了一个($('#one'))表达式求值
    //并没有起到定义后立即执行的效果
});

      //如果可达到你想要的效果

      $(document).ready(function () {
    (function select($pri) {
        var $current = $pri.next();
        $current.radioClass('hilite');
        setTimeout(function() { select($current); }, 1000);
    }($('#one')));
});

      2.next方法不会自动回到头部，所以执行完最后一个兄弟节点后，就没有效果了
      你需要在遍历到最后一个后，执行prev，从后往前遍历，到头后再next

      头像
      thenbsp
        1.3k247

        把你想要执行的内容写成 fucntion，塞入 setTimeout 就可以了。

        $(function() {

    var selector = $('#onem,#two,#three,#four');

    var timeoutCallback = function() {
    
        var current = selector.filter('.hilite');
        var next = current.next();
        
        if( next.length <= 0 ) {
            return false;
        }
        
        next.addClass('hilite');
        selector.removeClass('hilite');
    }
    
    setTimeout(timeoutCallback, 1000);

});

        另外，这个简单的示例不会一直循环下去的，因为当 .hilite 到最后一个元素时，timeoutCallback 将返回 false，你可以判断，当最手一个时，重新从第 1 个开始。

        头像
        newfoxnose
          782

          用settimeinterval代替settimeout，具体我就不写了。
          如果一定要用settimeout，那必须在内部再自己调用一次自己才能实现循环，否则只是延时执行而已。

          头像
          中大凤凰树
            69931520

            我动手写了下，主要思路是使用setInterval每隔1秒调用一次更换class hilite的函数；

            jQuery代码如下：

            <script type="text/javascript">

            $(function (){

            var shiftClass=function (){ //定义函数，使得具有.hilite类的下一个元素具有该class
            var $startItem=$('.hilite'); // 获取当前的.hilite类所在元素并存在变量中，会经常调用

            if ( $startItem.next().length) //判断当前具有hilite的元素是不是最后一个，如不是就把hilite传给下一个元素

            { $startItem.removeClass('hilite'); //移除当前元素的hilite类

            $startItem=$startItem.next();      //获取下一个元素并赋予hilite类

            $startItem.addClass('hilite');

            }
            else //如果当前具有hilite类的元素是最后一个元素了

            { $startItem.removeClass('hilite'); //移除它的hilite类属性

            $startItem=$('#radio div').eq(0); 	  //让$startItem重新定位到第一个位置并赋予类属性

            $startItem.addClass('hilite'); }

            };

            setInterval(shiftClass, 1000); //每隔1秒就调用一次函数

            })

            </script>

            body部分的内容就是你的：

            <body>
            <div id="radio">

            <div id="one" class="hilite">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div>

            </div>

            </body>

为了凸显这种交替的效果，设置了一段css

            <style type="text/css">
            .hilite{color:red;font-weight:bold;}

            </style>

            最终的效果就是每隔一秒，每隔div中的内容就变为红色加粗字体；

![图片描述][1]
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题