每隔N秒将类名移动到下一个兄弟元素

Question

每隔N秒将类名移动到下一个兄弟元素

6

我有一个如下的列表：

<ul>
  <li class="highlighted">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

每隔N秒，我希望将“highlighted”类移动到下一个元素。当没有更多兄弟元素时，请返回并从头开始。

有人能帮忙编写jQuery来实现这个功能吗？

谢谢！

- Mark

它会在页面加载时还是某个事件上触发？ - Priyank Patel

5个回答

4

好的，基本上你需要做这样的事情。

    function highlight_next_li() {
        var current = jQuery('.highlighted'); // get the current highlighted
        var next = current.next();

        // if no next then we're at the end
        if( !next.length )
            next = current.parent().find('li:first'); // get the first li element in the parent

        next.addClass('highlighted');
        current.removeClass('highlighted');
    }

那么您需要使用setinterval .. setinterval会每X毫秒重复执行一个函数..

    var myinterval = setInterval( highlight_next_li, 3000 ); // repeat that javascrispt every 3 seconds

那么当您想要停止重复时

    clearInterval( myinterval );

这里有一支笔可以让您实际体验： http://codepen.io/sagetarian/pen/dpKku

- Shannon Black

0

我尝试着去实现你所需要的功能。http://jsfiddle.net/wudhd/
你可以通过使用 jQuery 中的 setTimeout 和 nth-child 来完成同样的效果。

- sundar

0

var n = 1;
setInterval(function() {
  var $li = $("li.highlighted"),
      $siblings = $li.siblings().andSelf(),
      next = ($li.index() + 1) % $siblings.length;
  $li.removeClass("highlighted");
  $siblings.eq(next).addClass("highlighted");
}, n * 1000); // Run every n seconds

Fiddle。

- João Silva

0

可以看到，有很多不同的方法来实现这个...可以在变量中跟踪当前项目等

我还要展示另一种方式，我认为这种方式很简洁，并且它可以处理列表的动态更改。

需要给ul分配一个id或类，以某种方式进行标识，以便可以针对它进行操作。当然，如果您正在动态更改列表，则需要确保更改后仍有一个高亮显示。

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        setInterval(nextSibling, 10000);

        function nextSibling()
        {
            var family = $('#family').children();
            var i = $(family).filter('.highlighted').index();
            $(family[i]).removeClass('highlighted');
            $(family[(i+1)%family.length]).addClass('highlighted');
        }
</script>
<style>
    .highlighted { background: #dddddd; }
</style>

</head>
<body>
    <ul id="family">
      <li class="highlighted">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
</body>
</html>

- Ben Stephens

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Beetroot-Beetroot · Accepted Answer

像这样应该可以做到：

HTML：

<ul id="myList">
  <li class="highlighted">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript：

$(function() {
    var lis = $("#myList > li"),
        currentHighlight = 0;
        N = 5;//interval in seconds
    setInterval(function() {
        currentHighlight = (currentHighlight + 1) % lis.length;
        lis.removeClass('highlighted').eq(currentHighlight).addClass('highlighted');
    }, N * 1000);
});

DEMO