jQuery cycling through nested <li> elements to use :gt

Question

Hey,

Hope you can help. Trying to hide all < li > tags greater than the third tag in an < ul >. What's happening however is that after the first 3 < li > tags, ALL subsequent < li > regardles of :gt(2) are hidden in all subsequent < ul >.

Here's my HTML structure.

• LIST TITLE
  • item 1
  • item 2
  • item 3
  • should be hidden
  • should be hidden
• LIST TITLE
  • item 1
  • item 2
  • item 3
  • should be hidden
  • should be hidden
• LIST TITLE
  • item 1
  • item 2
  • item 3
  • should be hidden
  • should be hidden

And here's my jQuery.

$("ul li ul li:gt(2)").each(function () {
    $(this).hide();
});

If you need more info let me know. Thanks!

Answer 1

Try something like this:

var counter;
$("ul").each(function() {
    counter = 1;
    $(this).children("li").each(function() {
        if (counter > 3) $(this).hide()
        counter++;
    });
});

Answer 2

Hmm, I can't think of a way to work around this with a selector, but you could do it with two selectors:

$("ul li ul").each(function () {
    $(this).find("li:gt(2)").hide();
});