时间戳

首页 > 解决方案 > 隐藏第一个项目并显示第一个带有循环的隐藏项目

jquery - 隐藏第一个项目并显示第一个带有循环的隐藏项目

问题描述

如何使用 jquery 循环遍历 ul li 列表。隐藏第一个项目并显示第一个隐藏项目。

我没有找到类似的东西，所以我想在这里发布我的脚本。

标签： jqueryloopshtml-listsshow-hide

解决方案

HTML

<ul id="neue_bst">
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">1) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">2) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">3) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">4) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">5) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">6) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">7) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">8) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">9) Baustelle</div></li>
  <li><div class="fa fa-grip-lines"></div><div class="text_bst">10) Baustelle</div></li>
</ul>

脚本

var list = $('#neue_bst li:gt(8)');
list.hide();
    
setInterval(function() {
    
   var me = $('#neue_bst li').first();
   $('#neue_bst li').eq(1).hide();
    
   $('#neue_bst li').parent().append(me);
   $('li:last').hide();
    
   $('#neue_bst li').eq(8).fadeIn(500);
    
 }, 2000);

推荐阅读