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

Question

我试图根据click事件遍历无序列表的元素，以一次仅显示两个。 我可以通过显示/隐藏元素来完成此操作，但这似乎将我限制为四个项目，而我有六个项目，并且还会添加更多项目。

我认为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>

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> 

Answer 2

1. 将所有<li> DOM项目设置为display = none
2. 将要迭代的项目保存到变量中（$（“ li”）= listItems）
3. 将要迭代的项目总数保存到变量中（listitems.length = itemTotal）
4. 保存2个变量，item1 = 0和item2 = 1，稍后您将看到原因
5. 做一个for（var listItems in listItems）{}并在其中，检查当前项目的索引号是否与item1或item2项目计数器匹配。 如果是这样，请将display设置为true，否则设置为none。 如果无法获取索引，请保存一个从0开始的新计数器变量
6. 在for循环内，请确保检查项目变量是否超出范围。 例如：if（counter === listItems.length）{counter = 0; }，这样您就可以从0开始，直到清单项目编号的结尾

抱歉，我没有为您编写任何代码，但是我认为它应该足够清楚，并且您可以毫无疑问地搜索丢失的信息的较小部分（例如如何获取当前项目的索引等）

Answer 3

我将执行以下操作：

1. 获取所有可能显示的元素
2. 使用:visible选择器过滤列表，以获取当前可见项目的数量
3. 使用jQuery的.slice()函数选择接下来的两项，并显示它们

这是一个正在运行的示例：

 $(".cycleButton").on("click", function() { var items = $(".thumbBrowser li"); var shownItems = items.filter(":visible").length; items.slice(shownItems, shownItems + 2).show(); // you could use addClass("hidden") too }); 

 .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" alt="button"></div> </div>