Question

我有这个名单

<div class="item">
<ul>
<li class="a">A1</li>
<li class="a">A2</li>
<li class="a">A3</li>
<li class="b">B1</li>
<li class="b">B2</li>
<li class="b">B3</li>
<li class="c">C1</li>
</ul>
</div>

我需要在每个最后一类li之后拆分ul元素不可列举的清单

我如何用jQuery分裂成这个

<div class="item">
<ul>
<li class="a">A1</li>
<li class="a">A2</li>
<li class="a">A3</li>
</ul>
</div>
<div class="item">
<ul>
<li class="b">B1</li>
<li class="b">B2</li>
<li class="b">B3</li>
</ul>
</div>
<div class="item">
<ul>
<li class="c">C1</li>
</ul>
</div>

请帮忙谢谢！

Answer 1

最简单的方法是使用underscore's groupBy，然后删除所有html，并重新插入新结构。

var items = _.groupBy($('.item ul > li'), function(li) { return $(li).prop('class'); });
for(className in items) {
  var lis = items[className];
  var div = $('<div class="item"></div>');
  var ul = $('<ul></ul>');
  $(lis).each(function(i,e) {
    ul.append($(e));
  });
  div.append(ul);
  $('#container').append(div);
};

这是一个jsfiddle。不是最好的实现，但它应该让你足够接近！ http://jsfiddle.net/p93r1rv4/

Answer 2

假设HTML元素位于底部。您可以使用jQuery.each作为前置元素并执行：

$.each( $("ul.old li.a"), function( k, val) {
    $("#ul_a").prepend('<li class="a">' + val.innerHTML + '</li>');
});

$.each( $("ul.old li.b"), function( k, val) {
    $("#ul_b").prepend('<li class="b">' + val.innerHTML + '</li>');
});

$.each( $("ul.old li.c"), function( k, val) {
    $("#ul_c").prepend('<li class="c">' + val.innerHTML + '</li>');
});

HTML：

<div class="item">
<ul class="old">
<li class="a">A1</li>
<li class="a">A2</li>
<li class="a">A3</li>
<li class="b">B1</li>
<li class="b">B2</li>
<li class="b">B3</li>
<li class="c">C1</li>
</ul>
</div>
<div class="item">
    New Lists: <br/>
    <ul id='ul_a'> </ul>
    <ul id='ul_b'> </ul>
    <ul id='ul_c'> </ul>
</div>

使用jQuery通过li类名拆分ul列表

2 个答案: