javascript - 遍历无序列表以按顺序显示/隐藏元素

Question

我正在尝试循环遍历无序列表的元素，以便基于单击事件一次只显示两个元素。我可以通过显示/隐藏元素来完成此操作，但这似乎将我限制为四项，而我有六项并且会添加更多。

我认为 jQuery .each() 函数应该可以循环并切换显示属性，但我不知道从哪里开始。任何帮助表示赞赏。谢谢。这是我要遍历的内容。

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

Answer 1

$('#buttonClick').on('click', function() {
  var showing = $(this).closest('.thumbBrowser').find('ul li:visible');
  var next = showing.last().next();
  if( next.length === 0 ) {
    next = $(this).closest('.thumbBrowser').find('ul li').first();
  }
  next.toggleClass('hidden').next().toggleClass('hidden');
  showing.toggleClass('hidden');
});

.hidden {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="thumbBrowser">
          <ul>
            <li class="thumbLeft caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/argus_thumb.jpg" alt="one"></a>
            </li>
            <li class="thumbRight caseStudy tint">
              <img src="images/adr_thumb.jpg" alt="two">
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/dd_thumb.jpg" alt="three">
            </li>
            <li class="hidden thumbRight caseStudy tint">
              <img src="images/cdp_thumb.jpg" alt="four">
            </li>
             <li class="hidden thumbRight caseStudy tint tintWhite">
              <a href="client-page.html"><img src="images/pm_thumb.jpg" alt="five"></a>
            </li>
            <li class="hidden thumbLeft caseStudy tint tintWhite">
              <img src="images/argus_thumb.jpg" alt="six">
            </li>
          </ul>
          <div class="cycleButton" id="buttonClick"><img src="images/cycleIcon.png"></div>
    </div>