如何使用jquery分别显示/隐藏列表项？答案

【问题标题】：How to show/hide items of list respectively with interval using jquery?如何使用jquery分别显示/隐藏列表项？
【发布时间】：2016-10-03 14:50:25
【问题描述】：

我还有这个简单的 JavaScript：

$("body").children("div").each( function() {
    $(this).hide();      
});

目标是：

隐藏每个直接子 div（已完成 :)
显示第一个直接子 div
隐藏第一个 div，显示第二个
隐藏第二个 div，显示第三个等。
不管有多少个div
div 根据变量显示多长时间

我该怎么做？

【问题讨论】：

你试过什么？所有步骤都很容易研究，您应该展示您自己解决问题的尝试。这不是代码编写服务
见stackoverflow.com/questions/39682019/…，stackoverflow.com/questions/31763469/…

标签： javascript jquery html list

【解决方案1】：

您可以使用.queue()、.promise()、.delay()、setTimeout()

function toggleCollection(elems, duration, wait) {
    return elems.queue("toggle", $.map(elems, function(el) {
      return function(next) {
        return $(el).delay(duration).toggle(duration).promise().then(function() {
          $(this).delay(wait /* or duration */).toggle(duration)
          .promise().then(function() {
            setTimeout(next, wait)
          })
        })
      }
   })).dequeue("toggle").promise("toggle");
}

toggleCollection($("body > div").hide(), 3000, 1000 * 60 * 60)
.then(function(elems) {
  console.log("complete", elems);
  // toggle collection again
  // toggleCollection(elems, 3000, 1000 * 60 * 60)
});

【讨论】：

【解决方案2】：

您可以轻松做到这一点，首先使用:gt() 选择除第一个孩子以外的所有孩子并隐藏它们。然后在计时器中隐藏可见的孩子并显示下一个孩子。注意:visible选择可见元素，.next()选择下一个元素。

$(".list > div:gt(0)").hide();
setInterval(function(){
    $(".list > div:visible").hide().next().show();
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
  <div>Child 4</div>
  <div>Child 5</div>
  <div>Child 6</div>
  <div>Child 7</div>
</div>

【讨论】：