Question

我想使用jQuery将<ul class="main-list">包裹在它的第一个孩子<li>的每一个中。使用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>

Answer 1

你的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();

});

Answer 2

我认为是这样的：

li li{
    list-style-type: lower-alpha;
}

li li li{
    list-style-type: lower-roman;
}

这里还有一个小提琴，你可以把它搞得一团糟。 http://jsfiddle.net/nfw0kpxt/

Answer 3

这里有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);

使用jQuery在每个6 <li>周围包裹<ul>

3 个答案: