如何在第 n 个项目之后隐藏和显示直接子列表项目

Question

Say I have an unordered list, like so:

Demo

HTML Code:

<ul class="nav_accordian">
  <li>One
  <ul>
  <li>on 1.1</li>
  <li>on 1.2</li>
  <li>on 1.3</li>
  </ul>
  </li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>One 1</li>
  <li>Two 2</li>
  <li>Three 3</li>
  <li>Four 4</li>
  <li>Five 5</li>
  <li>One 11</li>
  <li>Two 22</li>
  <li>Three 33</li>
  <li>Four 44</li>
  <li>Five 55</li>
</ul>

Script File :

$('.nav_accordian').each(function(){
    var max = 4
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="showMore">show More</span></li>');

        $('.sub_accordian').click( function(){
            $(this).siblings(':gt('+max+')').toggle();

            if ( $('.show_more').length ) {
                $(this).html('<span class="showMore">show More</span>');
            } 
            else {
                $(this).html('<span class="showMore">less More</span>');
            };
        });
    };
});

i did for when i click on 'show more' it should be visible all the results of list items . Once every results loaded 'show more' text would be changed on 'less more'.

and when i clicked upon the 'less more' button first five results result items should be visible other items would be hide.

The issue is the script is consider only direct child list of i did for when i click on 'show more' it should be visible next five results of list items . Once every results loaded 'show more' text would be changed on 'less more'.

and when i clicked upon the 'less more' button first results result items should be visible other items would be hide.

but my script is consider li child ul also but i dont want

i am expected output as:

one

two

three

four

five

Show more

Answer 1

Try to use the > child selector whenever you want to target the first level children.

if ($(this).find('> li').length > max) {
//----------------^
        $(this).find('> li:gt('+max+')').hide().end().append('<li ....
//--------------------^

DEMO

Answer 2

From your explanation I get confused... but as a contribution, this is the code I did... HTML:

<ul class="nav_accordian">
 <li>One
  <ul>
   <li>on 1.1</li>
   <li>on 1.2</li>
   <li>on 1.3</li>
  </ul>
 </li>
<li>Two
 <ul>
   <li>on 2.1</li>
   <li>on 2.2</li>
   <li>on 2.3</li>
  </ul>
 </li>
 <li>Three
  <ul>
   <li>on 3.1</li>
   <li>on 3.2</li>
   <li>on 3.3</li>
  </ul>
 </li>
</ul>

*Sorry about the indentation.

jQuery:

$('.nav_accordian > li').each(function(){
  $(this).children('ul').hide();
  $(this).append('<li class="sub_accordian"><span class="showMore">show More</span></li>');//.children().hide();
}); 

$(document).on('click','.sub_accordian', function(){
  $(this).siblings().toggle();
  if ( $('.show_more').length ) {
    $(this).html('<span class="showMore">show More</span>');
  } 
  else {
    $(this).html('<span class="showMore">less More</span>');
  }
});