javascript – 找到重复的LI类名,并使用jQuery在UL中对它们进行分组

我有一个项目清单,

<ul class="testList">
  <li class="a">Should be grouped in a UL with id name = a</li>
  <li class="b">2</li>
  <li class="c">Should be grouped in a UL with id name = c</li>
  <li class="c">Should be grouped in a UL with id name = c</li>
  <li class="d">2</li>
  <li class="e">3</li>
  <li class="a">Should be grouped in a UL with id name = a</li>
</ul>

我试图找到重复的LI类,然后将它们分组到UL.

这是我的jQuery代码

$('ul.testList li').each(function(index,el) {
    var li = $(this);
    var cls = li.attr('class');
    var match = $('li[class="' + cls + '"]');

    if (match.length > 0) {
        var ul = $('<ul id="'+ cls +'"></ul>');
        match.appendTo(ul);

        $(this).add(match).addClass('matched');
    }
});

见jsFiddle：https://jsfiddle.net/b4vFn/41/

解决方法

这为每个附加了一个新的UL并删除了原件.还假设这些李只有一个班级.还假设页面中没有其他类似的ID

$('ul.testList li').each(function(index,el) {

    var li = $(this),cls = li.attr('class'),$parent=$('#'+cls);
    // if new parent doesn't exist create it
    if(!$parent.length){
        $parent = $('<ul id="'+cls+'">').appendTo('body');            
    }
    $parent.append(li.addClass('matched'))
});
// remove original    
$('ul.testList').remove()

DEMO