Question

我有这个简单的JavaScript：

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

目标是：

隐藏每个直接的儿童div（已完成:)
显示第一个直接儿童div
隐藏第一个div，显示第二个
隐藏第二个div，显示第三个等。
无论有多少div，
div基于变量

我该怎么做？

Answer 1

您可以使用.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) });

Dim m as sub

Public sub alg1()
    call alg2()
End sub

Public sub alg2()
    m = alg1
    call alg3()
End sub

Public sub alg3()
    call m
End sub

Answer 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>

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

2 个答案: