javascript - 逐个加载页面上的div

Question

<script>
$(document).ready(function(){
    $( "#clr" ).each(function(i) {
    $("#clr"+id).fadeOut(0).delay(1000*i).fadeIn(1850);
   )};
});
</script>

<div class="row" id="clr">
        <a href="wishfinal/" class="custom" id="clr1"><span class="textstyle">WISHINDIA</span></a>
        <a href="shoutit/" class="custom" id="clr2"><span class="textstyle">SHOUTIT</span></a>
        <a href="snake/" class="custom" id="clr3"><span class="textstyle">SNAKE</span></a>
        <a href="test/index.php" class="custom" id="clr4"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr5"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr6"><span class="textstyle">TESTING</span></a>
        <a href="test/index.php" class="custom" id="clr7"><span class="textstyle">TESTING</span></a>
     </div>
   </div> 

我正在尝试一个接一个地延迟加载 div 但无法这样做，请帮助完成此操作

Answer 1

首先，您需要修复传递给 .each 函数的匿名函数周围的语法错误。基本上，.each 的结束 ) 括号应该在传递给它的匿名函数的结束 } 之后。

然后，您应该迭代 #clr > a，而不是迭代 #clr - 意思是在 anchor 标记而不是 div 元素上迭代。

此外，您不必在 .each 函数中指定选择器。您可以改为使用 $(this) 来引用元素。

最后，您可以将 .each 中的元素索引引用为 id 或 i。在下面的代码片段中，我使用了 id。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#clr > a").each(function(id) {
        $(this).fadeOut(0).delay(1000 * id).fadeIn(1850);
    });
  });
</script>

<div class="row" id="clr">
  <a href="wishfinal/" class="custom" id="clr1"><span class="textstyle">WISHINDIA</span></a>
  <a href="shoutit/" class="custom" id="clr2"><span class="textstyle">SHOUTIT</span></a>
  <a href="snake/" class="custom" id="clr3"><span class="textstyle">SNAKE</span></a>
  <a href="test/index.php" class="custom" id="clr4"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr5"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr6"><span class="textstyle">TESTING</span></a>
  <a href="test/index.php" class="custom" id="clr7"><span class="textstyle">TESTING</span></a>
</div>
</div>