javascript - 在最大数之后 - 将所有剩余的 li 项目包装到 ul

Question

我认为通过发布代码更容易理解我想要实现的目标。但想法是。我有大约 8 个 li 项目，但在 3 个之后，我想创建一个名为“more”的新 li 项目，其余 5 个项目应该移到一个新的 ul 中，它将充当子菜单。这是 html

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

这是javascript

$('.ow_main_menu').each(function(){
    var max = 3
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="show_more">More</li>');

        $('.show_more').hover( function(){
            /* stuck */
        });

    };
});

应该是这样的

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li class="show_more">More
        <ul>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </li>
</ul>

显示更多部分我已经开始工作了，但我不知道如何包装其余项目。

Answer 1

一种方法如下(尽管它仍然感觉有点笨拙):

// using 'on()' to delegate the click-event handling to a 'ul' element
// that exists in the DOM, that becomes an ancestor to the created
// elements:
$('ul').on('click', 'li.more', function(e){
    $(this).find('ul').toggle();
});

// select all 'li' elements, retain only the 3rd (JavaScript's indexing is
// zero-based:
$('li').eq(2)
// get all the subsequent siblings:
.nextAll()
// wrap them all together within the supplied HTML:
.wrapAll('<li class="more">Read more<ul></ul></li>')
// find the ancestor 'ul' (to the 'li' elements returned by 'wrapAll()'):
.closest('ul')
// hide that 'ul':
.hide();

JS Fiddle demo .

引用资料:

• > click() .
• > eq() .
• > find() .
• > nextAll() .
• > on() .
• > toggle() .
• > wrapAll() .