Question

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++;     }); });