Question

我有这样的结构：

<ul>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
</li>
<li>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</li>
<li>
<span>9</span>
<span>10</span>
</li>
</ul>

我需要重新组织：

<ul>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</li>
<li>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
</li>
</ul>

实现这一目标的最有效方法是什么？

Answer 1

var spans = $('span').toArray();
$('li').each(function(i, li) {
    for (var i = 0; i < 5; i++) {
        if (spans.length == 0) break;
        $(spans.shift()).appendTo(li);
    }
    if ($(li).find('span').length === 0) {
        $(li).remove();
    }
});

Answer 2

var spans = $('span');
var ul = $('ul').html(''); //UL Empty
var li = $('<li>').appendTo(ul);

$.each(spans, function(ind, ele){
    if (ind == 5)
        li = $('<li>').appendTo(ul);
    li.append( ele );
});

这样可以避免每个函数中的for循环

使用jquery删除它们时的随机元素

2 个答案: