Question

Need a bit of help understanding how to iterate through all ul elements with a class of ul.children and hide any of the child elements under ul.child greater than 8.

example of my code below:

$(function() {
$('ul.children').each(function() {
    var $ul = $(this);
    if($ul.children().length > 8) {
        $ul.hide();
    } 
});
});

example of my html code:

<ul class="children>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>hide all other li elements below this point</li>
</ul>

<ul class="children>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>hide all other li elements below this point</li>
</ul>

Answer 1

You can use gt() to filter the elements having index greater than 8.

Live demo

$(function () {
    $('ul.children').each(function () {        
        $('li:gt(8)', this).hide();        
    });
});