用 jQuery 将 <ul> 包裹在每 6 个 <li> 周围 [重复]答案

【问题标题】：Wrap <ul> around every 6 <li> with jQuery [duplicate]用 jQuery 将 <ul> 包裹在每 6 个 <li> 周围 [重复]
【发布时间】：2015-08-28 20:50:30
【问题描述】：

我想使用 jQuery 将 <ul class="main-list"> 包裹在它的第一个孩子 <li> 的每 6 个周围。使用 jQuery 完成此任务的最佳方法是什么？

这是我正在使用的 jQuery：

$(document).ready(function() {
    var lis = $(".main-list li");
    for(var i = 0; i < lis.length; i+=6) {
      lis.slice(i, i+6)
         .wrapAll("<ul class='list_unstyled'></ul>");
    }
});

这是原始代码（ExpressionEngine）：

<ul class="list-unstyled main-list">
    {exp:channel:category_archive channel="speakers" style="linear" backspace="7"}
        <li>
            {categories}
                <a href="#">{category_name}</a>
            {/categories} 
            {entry_titles}  
            <ul class="list-unstyled"> 
                <li><a href="{path='site/speaker'}">{title}</a></li>
            </ul>  
            {/entry_titles}     
        </li>   
    {/exp:channel:category_archive}     
</ul>

这是当前使用上面的 jquery 输出的代码：

<ul class="list-unstyled main-list">
    <ul class="list_unstyled">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="list_unstyled">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</ul>

这是实现 jQuery 后想要的结果：

<ul class="list_unstyled">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class="list_unstyled">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

【问题讨论】：

请附上您的 jQuery 代码和原始 HTML，以便我们帮助解决问题。
我稍微修改了我的问题。我实际上尝试了几段 jQuery 代码，但没有运气所以没有发布我的问题。不要'认为它是相关的。
很公平。在我看来，看看你已经尝试过什么以及具体出了什么问题会很有帮助。我发现这个过程有助于学习（对于当前和未来的读者），而不仅仅是根据规范生成代码。
@Sergey Denisov，是的，它很相似，我也看到过这篇文章，但并不完全相同。
@showdev，在上面粘贴了我的 jQuery 并稍微修改了我的问题。请保持让我知道最新消息。谢谢！

标签： jquery html

【解决方案1】：

我认为是这样的：

function wrapLi( parent ){
    var numChildren = $( parent ).children( 'li' ).length,
        wrappers = [];

    for( var i = 0; i < numChildren / 6; i++ ){
        wrappers[i] = $( '<ul class="main-list"></ul>' );

        // the meat and potatoes... select the first six elements of the matched set
        // check out http://www.w3schools.com/jquery/jquery_ref_selectors.asp
        wrappers[i].append( $( parent ).children( 'li:lt(6)' ) );
    }

    return wrappers; // the array of <ul> that you can put wherever you want
}

var stuff = wrapLi(  $( '.main-list' ) );

$( 'body' ).append( stuff );

这里还有一个你可以弄乱它的小提琴。 http://jsfiddle.net/nfw0kpxt/

【讨论】：

【解决方案2】：

这里有我的JsFiddle

很容易解决。

var firstUl = $("<ul>");
var secondUl = $("<ul>");
var size = $(".main-list li").size();
var elements = $(".main-list li");
size--;

for(var i = 0; i < size; i++) {
    firstUl.append(elements[i]);
}

secondUl.append(elements[size++]);

$(".result").append(firstUl);
$(".result").append(secondUl);

【讨论】：

wtf，你完全改变了问题

【解决方案3】：

您的 jquery 函数已经完成了您想要的操作，即将它们按 6 分组，因此您只需要删除包含列表的 .main-list 即可。您需要做的就是在循环之后展开。

$('.main-list>ul').unwrap();

即

$(document).ready(function() {
    var lis = $(".main-list li");
    for(var i = 0; i < lis.length; i+=6) {
      lis.slice(i, i+6)
         .wrapAll("<ul class='list_unstyled'></ul>");
    }

    $('.main-list>ul').unwrap();

});

【讨论】：

感谢@Keith A，稍作调整就成功了：var lis = $(".main-list > li");