Javascript 遍历无序列表以按顺序显示/隐藏项目

我试图循环遍历无序列表中的元素，根据单击事件一次只显示两个。我可以通过显示/隐藏元素来实现这一点，但这似乎将我限制为四项，我有六项，并将添加更多

我认为jQuery.each（）函数应该能够循环并切换display属性，但我一直不知道从哪里开始。感谢您的帮助。谢谢这是我想循环的内容

<div class="thumbBrowser">
          <ul>
            <li class="thumbLeft caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/argus_thumb.jpg"></a>
            </li>
            <li class="thumbRight caseStudy tint">
              <img src="images/adr_thumb.jpg">
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/dd_thumb.jpg">
            </li>
            <li class="hidden thumbRight caseStudy tint">
              <img src="images/cdp_thumb.jpg">
            </li>
             <li class="hidden thumbRight caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/pm_thumb.jpg"></a>
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/argus_thumb.jpg">
            </li>
          </ul>
          <div class="cycleButton" id="buttonClick"><img src="images/cycleIcon.png"></div>
    </div>

$（'#按钮单击'）。在（'单击'，函数（）上）{
显示的变量=$（this）.closest（'.thumbBrowser'）.find（'ulli:visible'）；
var next=显示.last（）.next（）；
如果（next.length==0）{
next=$（this）.closest（'.thumbBrowser'）.find（'ul li'）.first（）；
}
next.toggleClass（'hidden'）.next（）.toggleClass（'hidden'）；
showing.toggleClass（'hidden'）；
});
。隐藏{
显示：无；
}
















将所有
DOM项设置为display=none
保存要迭代到变量中的项（$（“li”）=listItems）
保存迭代到变量中的项目总数（listitems.length=itemTotal）
保存2个变量，item1=0和item2=1，稍后您将看到原因
对（listItems中的var listItem）{}执行一个操作，并在该操作中检查当前项的索引号是否与item1或item2项计数器匹配。如果是，请将display设置为true，否则设置为none。如果无法获取索引，请保存一个从0开始的新计数器变量
在for循环中，确保检查项目变量是否超出范围。例如：如果（counter==listItems.length）{counter=0；}，那么当您到达列表项编号的末尾时，可以从0开始
很抱歉，我没有为您编写任何代码，但我认为应该足够清晰，您应该可以通过谷歌搜索少量缺失信息（如如何获取当前项目的索引等）
我将执行以下操作：

获取所有可能显示的元素的列表
使用
：visible
选择器筛选该列表，以获取当前可见项的计数
使用jQuery的
.slice（）
函数选择接下来的两项，并显示它们
下面是一个运行示例：


$（.cycleButton”）。在（“单击”，函数（）{
var项目=$（“.thumbBrowser li”）；
var shownItems=items.filter（“：可见”）.length；
items.slice（shownItems，shownItems+2）.show（）；//您也可以使用addClass（“隐藏”）
});
.hidden{display:none}















请发布您的JavaScript.Hmmm，也许可以显示您的问题所在的片段。更容易想象事物。。。你知道的。。。视觉效果。是否希望用户每次单击按钮时再显示2个？2,4,6…我没有任何JS可以发布，因为我一直在研究如何构造它，这样它就可以遍历每个元素，而无需打开或关闭可见性来显示列表项，因为这将显示隐藏的四个项，而不是一次只显示两个。阿明，是的，这正是我需要做的。回答很好，谢谢。不幸的是，当我在页面上实现这一点时，它不会像您的一样循环。有什么想法吗？这是页面，代码在图像浏览器上，英雄图像下面有一个循环图标。您没有按正确的顺序加载脚本；jquery应该在顶部，插件，然后是代码。遗憾的是，这是您当前拥有的
更改订单无效。我也把它移到了头上，没有骰子。Chrome inspector在我迭代到最后时显示了应用于所有六个元素的隐藏类，但您的元素仍在循环。如果页面上有其他ul元素，请使用div.thumbBrowser ul li而不是ul li。或者您可以尝试上面的更新版本。