Iterate through unordered list to show/hide items in order

Question

I'm trying to loop through the elements of an unordered list to display only two at a time, based on a click event. I can accomplish this with showing/hiding the elements but that seems to limit me to four items and I have six and will be adding more.

I think the jQuery .each() function should work to loop through and toggle the display property but I'm stuck on where to start. Any help is appreciated. Thanks. Here's what I'm trying to loop through.

<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. Set all < li > DOM items to display=none
2. Save the items you want to iterate into a variable ($("li") = listItems)
3. Save the total item number you are iterating into a variable (listitems.length = itemTotal)
4. Save 2 variables, item1=0 and item2=1, you will see why later
5. Do a for(var listItem in listItems) {} and inside it, check if the current item's index number matches the item1 or item2 item counter. if so, set display to true, otherwise to none. If you can't get the index, save a new counter variable that starts at 0
6. Inside the for loop, make sure to check if your item variables run out of scope. For example: if (counter === listItems.length) { counter = 0; }, this way you can start over at 0 when you get to the end of your list item number

Sorry I didn't write you any code, but I think it should be clear enough and you should have no issue googling the smaller bits of missing information (like how to get the current item's index and such)

Answer 3

I would do the following:

1. Get a all the elements that would possibly be shown
2. Filter that list using the :visible selector to get the count of currently visible items
3. Use jQuery's .slice() function to select the next two items, and show them

Here's a running example:

 $(".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>