Question

I have a page with multiple lists. Each list has a different amount of list items.
I want to show a less/more link after every third list item and I would like to hide the less/more link if my list has less than 3 items in it.

This is what I’ve got so far:

    var n = $('ol.checkboxes').children.length;

    if (n > 3) {
           $('ol.checkboxes')
            .find('li:gt(2)')
            .addClass('toggleli')
            .hide()
            .end()
            .append(
                 $('<li class="collapsed">More>>  </li>').click(function(){
                 $(this).siblings('.toggleli').toggle();
              if($(this).hasClass('expanded')){
                  $(this).text(metaData['MORE_TEXT']);
                  $(this).removeClass('expanded');
              } else{
                  $(this).text(metaData['LESS_TEXT']);
                  $(this).addClass('expanded');
              }
        }));
       }
     });

Unfortunately, this counts all the list items that are in a ol.checkboxes..
Any help would be greatly appreciated!

Answer 1

use $("ol").find('li').length

and for more than one ol use

$("ol").each(function(){
 var len = $(this).find('li').length; //if nested list then use children() instead find()
 if (len>3){
  //do stuff
 }
});