Question

我想要实现的目标：

<ul>
    <li class="group4">
        <ul class="group2">
            <li class="first">stuff</li>
            <li class="last">stuff</li>
        </ul>
        <ul class="group2">
            <li class="first">stuff</li>
            <li class="last">stuff</li>
        </ul>
    </li>
    <li class="group4">
        <ul class="group2">
            <li class="first">stuff</li>
            <li class="last">stuff</li>
        </ul>
        <ul class="group2">
            <li class="first">stuff</li>
            <li class="last">stuff</li>
        </ul>
    </li>
</ul>

我目前配备的内容：

<ul>
    <li class="first">stuff</li>
    <li class="last">stuff</li>
    <li class="first">stuff</li>
    <li class="last">stuff</li>
    <li class="first">stuff</li>
    <li class="last">stuff</li>
    <li class="first">stuff</li>
    <li class="last">stuff</li>
</ul>

基本上，这将使列表项在移动视图中以4行和2行显示。

我无法对此进行硬编码，因为列表项是通过php检索的。

是否有可以帮助我这样做的脚本或其他内容？

Answer 1

var $ul = $('ul').find('.first').each(function() {
   $(this).next('.last').addBack().wrapAll('<ul class="group2"/>');
}).end();

while( $ul.children('.group2').length )
   $ul.children('.group2').slice(0, 2).wrapAll('<li class="group4"/>');

http://jsfiddle.net/Twr9z/

Answer 2

这将做你想要的，加上保留W3C验证：

$('.first').each(function(){
    if(!$(this).data('wrapped')){
        $(this).wrap('<ul class="group2"></ul>');
        $(this).parent('.group2').append($(this).parent('.group2').nextAll('.last:first').clone()).html();

        $(this).parent('.group2').nextAll('.last:first').remove();
        $(this).parent('.group2').wrap('<li class="group4"></li>');
        $(this).data('wrapped',true);
    }
});

Answer 3

如果你不知道每组中有多少项，那么另一种方法就是这样做：

function relist() {
    var list = $("ul.list");
    var li = list.children("li");
    var _li, _ul, item;
    for (var i = 0 ; i < li.length; i++) {
        if (i % 2 == 1) {
            item = list.find("li:eq(" + i + "), li:eq(" + parseInt(i - 1) + ")");
            _ul = $("<ul class='group_" + item.length + "'></ul>");
            item.wrapAll(_ul);
        }
    }
    var ul = list.find("ul");
    for (var j = 0; j < ul.length; j++) {
        if (j % 2 == 1) {
            item = list.find("ul:eq(" + j + "), ul:eq(" + parseInt(j - 1) + ")");
            _li = $("<li class='group_" + item.find('li').length + "'></li>");
            item.wrapAll(_li);
        }
    }
}

$(function () {    relist()});

类的名称将是group +其下的项目数。

在div中包装列表组

3 个答案: