Question

我有这样的HTML代码：

<li>one</li>
<li>two</li>
<li>era</li>
<li>jeu</li>
<li>iuu</li>
<li>iij</li>
<li>emu</li>
<li>our</li>

我需要将它们平均分为2个元素（如果总数为11，则为5：6），如下所示：

<ul>
    <li>one</li>
    <li>two</li>
    <li>era</li>
    <li>jeu</li>
</ul>
<ul>
    <li>iuu</li>
    <li>iij</li>
    <li>emu</li>
    <li>our</li>
</ul>

这适用于任何数量的<li>。你能用jQuery建议一个优雅的解决方案吗？

Answer 1

var $li = $('li'),
    half = Math.floor($li.length/2);

$li.filter(function(i){ return i < half; }).wrapAll('<ul>');
$li.filter(function(i){ return i >= half; }).wrapAll('<ul>');

Demo

Answer 2

您可以除以2，然后向下或向上舍入（取决于您是否需要4:5或5:4）。在执行此操作后，将li替换为包含ul的{{1}}（首先克隆它们，否则li会被移动，并且不会能够被替换因为原来的位置丢失了。）

http://jsfiddle.net/TBhYX/

li

您还可以概括最后两部分：http://jsfiddle.net/TBhYX/1/。

var li     = $('li'),
    amount = li.length,
    left   = amount / 2 | 0, // '| 0' rounds down
    right  = amount - left;

var leftElems = li.slice(0, left);
leftElems.replaceWith($('<ul>').append(leftElems.clone(true)));

var rightElems = li.slice(left, amount);
rightElems.replaceWith($('<ul>').append(rightElems.clone(true)));

Answer 3

首先，您可以使用jQuery中的.each并计算它们......

http://api.jquery.com/jQuery.each/

然后创建2 ul，然后只取其中的一半并将它们放在第一个ul中。然后在第二个......

示例代码：

<div class="take_those">
    <li>One</li>
    <li>Ein</li>
</div>
<ul class="first">
</ul>
<ul class="second">
</ul>

查看元素是什么样的

$(document).ready(function() {
    var total_items = 0;
    total_items = $(".take_those li").length;
    $(".take_those li").each(function(i) {
        if(i<(total_items/2)) {
            $(".first").append("<li>"+$(this).html()+"</li>");
        } else {
            $(".second").append("<li>"+$(this).html()+"</li>");
        }
    });
});

或类似的......

这对你有帮助吗？

将子元素平均包装成2个div

3 个答案:

Demo