6

我有一个清单如下：

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

每隔 N 秒，我想将“突出显示”类移动到下一个元素。当没有更多兄弟姐妹时，请返回并从头开始。

有人可以帮助 jQuery 来完成这个吗？

谢谢！

4

5 回答 5

6

这样的事情应该这样做：

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);
});

演示

于 2012-08-21T11:27:22.477 回答
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 毫秒重复一个 set 函数..

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

那么当你想停止重复时

    clearInterval( myinterval );

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

于 2012-08-21T11:28:11.027 回答
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>
于 2012-08-21T11:37:54.263 回答
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

小提琴。

于 2012-08-21T11:30:20.603 回答
0

我试图实现你正在寻找的东西。http://jsfiddle.net/wudhd/
你可以看看jquery 的setTimeout和nth-child来完成同样的事情。

于 2012-08-21T11:33:27.093 回答