Question

我有一个如下列表：

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

每隔N秒，我想将'突出显示的'类移动到下一个元素。如果没有兄弟姐妹，请从头开始回去。

有人可以帮助jQuery来实现这个目标吗？

谢谢！

Answer 1

这样的事情应该这样做：

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

Answer 2

好的，所以基本上你会做这样的事情

    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毫秒重复一次set函数。

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

然后当你想要停止重复

    clearInterval( myinterval );

这是一支笔，你可以看到它的实际效果：http://codepen.io/sagetarian/pen/dpKku

Answer 3

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

Answer 4

我试图实现你想要的东西。 http://jsfiddle.net/wudhd/
您可以查看jquery的setTimeout和nth-child来完成相同的操作。

Answer 5

可以看出，许多不同的方法......可以跟踪变量等中的当前项目

无论如何我要展示另一个，我认为这种方式很简洁，它会处理列表的动态变化。

依赖于为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>

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

5 个答案: