Подсчитайте количество элементов списка и создайте раскрывающееся меню «больше»

Question

Я пытаюсь создать меню, которое подсчитывает число <li>, и если в списке их более 5, переместите остальные в раскрывающийся список.

В основном код будет выглядеть следующим образом:

<ul class="menu"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    <li>Item 7</li> 
    <li>Item 8</li> 
    <li>Item 9</li> 
    <li id="more"> 
    <a href="#">More</a> 
    <ul> 
     <li>Move 6 here</li> 
     <li>Move 7 here</li> 
     <li>Move 8 here</li> 
     <li>Move 9 here</li> 
    </ul> 
    </li> 
</ul> 

Подсчет количества элементов может быть достигнуто с $("#menu").children().length - но то, что я должен делать?

Answer 1

Чтобы получить количество прямых потомков li s внутри .menu:

$('.menu > li').length 

Для перемещения li с в more:

$('.menu li:gt(4):not(#more)').appendTo('#more ul'); // If `#more` already exists 

Демо: https://jsfiddle.net/tusharj/77120z44/1/

EDIT

Если #more не существует:

$('.menu').append('<li id="more"><ul></ul></li>'); 
$('.menu li:gt(4):not(#more)').appendTo('#more ul'); 

Демо: https://jsfiddle.net/tusharj/77120z44/4/

Answer 2

$('.menu:has(li:gt(4))').each(function() { 
 
    $(this).append('<li id="more"></li>'); 
 
    $(this).find('#more').append('<a href="#">More</a>'); 
 
    $(this).find('#more').append('<ul></ul>'); 
 
    var lis = $(this).find('li:gt(4)').not('#more'); 
 
    $(this).find('#more').find('ul').append(lis); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    <li>Item 6</li> 
 
    <li>Item 7</li> 
 
    <li>Item 8</li> 
 
    <li>Item 9</li> 
 

 
</ul>

Answer 3

Вы можете использовать длину детей, чтобы определить, следует ли переместить их, если да, то создать новую структуру li и ul, как требуется, как указано ниже

var $menu = $('.menu'); 
 
if ($menu.children().length > 5) { 
 
    //create a new ul and all lis after the 5th one to that 
 
    var $ul = $('<ul />').append($menu.children().slice(5)).hide(); 
 
    //create a new anchor element with a click handler that will toggle the more div 
 
    var $a = $('<a />', { 
 
    href: '#', 
 
    text: 'More' 
 
    }).click(function() { 
 
    $(this).text(function(i, text) { 
 
     return text == 'More' ? 'Less' : 'More'; 
 
    }).next().toggle(); 
 
    }); 
 
    //create a new li element and add the anchor and ul to it and append the li to the parent ul 
 
    $('<li />', { 
 
    id: 'more' 
 
    }).append($a).append($ul).appendTo($menu); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
    <li>Item 6</li> 
 
    <li>Item 7</li> 
 
    <li>Item 8</li> 
 
    <li>Item 9</li> 
 
</ul>

Answer 4

Создать новый элемент списка, содержащий ul тег. Используйте селектор :gt(n), чтобы получить любые элементы, превышающие n. Добавьте эти элементы в ul созданного элемента, а затем добавьте созданный элемент в исходный список.

(Demo)

$('.menu:has(li:gt(5))').each(function() { 
    var more = $('<li><a href="#">More</a><ul></ul></li>'); 
    $('ul', more).append($(this).find('li:gt(4)')); 
    $(this).append(more); 
});