如何使用jQuery循环遍历ul li列表 隐藏首项并显示首个隐藏项

以下是可直接复用的实现方案，适合消息滚动、列表轮播等需求场景： #

核心实现逻辑 #

通过显式遍历ul下的所有li元素定位目标节点，按需求完成状态切换：

1. 循环遍历所有列表项，找到当前处于显示状态的第一个li元素
2. 同步找到当前处于隐藏状态的第一个li元素
3. 隐藏首个显示项并移入隐藏队列尾部，保证后续循环顺序正常
4. 显示首个隐藏项并移除隐藏标识

完整代码示例 #

HTML 结构 #

<!-- 列表固定高度，超出部分隐藏 -->
<ul class="loop-list" style="height: 150px; overflow: hidden; margin: 0; padding: 0;">
  <li>第1条列表内容</li>
  <li>第2条列表内容</li>
  <li>第3条列表内容</li>
  <!-- 预隐藏的项添加hidden类，默认不显示 -->
  <li class="hidden" style="display: none;">第4条列表内容</li>
  <li class="hidden" style="display: none;">第5条列表内容</li>
  <li class="hidden" style="display: none;">第6条列表内容</li>
</ul>
<!-- 可选：触发切换的按钮 -->
<button id="toggleBtn">切换列表项</button>

jQuery 脚本（遍历实现版本） #

// 等待DOM加载完成后执行
$(function () {
  const $list = $('.loop-list');
  const $listItems = $list.find('li');

  // 切换方法封装
  function switchListItem() {
    let firstVisibleIndex = -1;
    let firstHiddenIndex = -1;

    // 循环遍历所有li，定位首个可见和首个隐藏项的索引
    $listItems.each(function (index) {
      if ($(this).is(':visible') && firstVisibleIndex === -1) {
        firstVisibleIndex = index;
      }
      if ($(this).hasClass('hidden') && firstHiddenIndex === -1) {
        firstHiddenIndex = index;
      }
      // 两个索引都找到就终止遍历，减少性能消耗
      if (firstVisibleIndex !== -1 && firstHiddenIndex !== -1) {
        return false;
      }
    });

    // 执行切换操作
    $($listItems[firstVisibleIndex]).hide().addClass('hidden').appendTo($list);
    $($listItems[firstHiddenIndex]).show().removeClass('hidden');
  }

  // 绑定点击触发
  $('#toggleBtn').on('click', switchListItem);

  // 若需要自动轮播，打开下方注释即可，3000为间隔毫秒数
  // setInterval(switchListItem, 3000);
})

扩展说明 #

• 如果需要平滑动画效果，可将hide()/show()替换为slideUp(300)/slideDown(300)实现上下滚动效果
• 脚本兼容jQuery 1.8及以上所有版本
• 列表项数量无限制，会自动按顺序循环切换

内容的提问来源于stack exchange，提问作者M1NT