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>

应分组在id名称为a的UL中
2
应分组在id名称为c的UL中
应分组在id名称为c的UL中
2
3
应分组在id名称为a的UL中

我试图找到重复的LI类，然后将它们分组到ULs中

这是我的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');
    }
});

$（'ul.testList li'）。每个（函数（索引，el）{
var li=$（本）；
var cls=li.attr（'class'）；
var match=$（'li[class=“”+cls+'“]）；
如果（match.length>0）{
var ul=$（“
”）；
匹配。附录（ul）；
$（this.add（match）.addClass（'matched'）；
}
});

---

请参阅：

这将为每个附加一个新的UL，并删除原始UL。还假设这些

li

上只有一个类。还假设页面中不能有其他类似的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()

$（'ul.testList li'）。每个（函数（索引，el）{
var li=$（此），
cls=li.attr（'class'），
$parent=$（“#”+cls）；
//如果新父级不存在，请创建它
如果（！$parent.length）{
$parent=$（“
”）.appendTo（'body'）；
}
$parent.append（li.addClass（'matched'））
});
//删除原件
$（'ul.testList'）.remove（）

尝试使用

.appendTo（）

，

.append（）

，

.is（）

。注意，如果

li

className

在

.testList

中未重复，则

li

未给出

匹配的
类
，未附加到新的
ul
元素中


$（“ul.testList li”）。每个（函数（i，el）{
if（！$（el）.parent（）.find（#“+this.className）.is（“*”）
//如果“.testList”有另一个“li”元素，该元素有“this.className”
&&$（el）.parent（）.find（“.”+this.className）.not（this.is（“*”）{
$（el.parent（）
.附加(
$（“
”{
html:$（“
”{
id:el.className
}).append（$（el）.addClass（“匹配”）[0].outerHTML
})
);
}否则{
$（el）.appendTo（“#”+this.className）.addClass（“匹配”）
}
})
。匹配{
颜色：红色；
}


应分组在id名称为a的UL中
2
应分组在id名称为c的UL中
应分组在id名称为c的UL中
2
3
应分组在id名称为a的UL中
您可以这样做
var cls=[]；
//获取唯一的类名
$（'.testList li'）.attr（'class'，函数（i，v）{
if（cls.indexOf（v）=-1）cls.push（v）；
});
//迭代类名并创建ul和追加
对于（变量i=0；i”{
id:cls[i]
});
//选择具有classname的所有元素并将其附加到ul
$（'..+cls[i]）。附于（ul）之后；
//创建要添加到主ul的新li，将html设置为已创建的ul。
$（“
”{
html:ul
}).appendTo（“.testList”）；
}


应为红色，并分组在id名称为a的UL中
2
应为红色，并分组在id名称为c的UL中
应为红色，并分组在id名称为c的UL中
2
应为红色，并分组在id名称为a的UL中
这将对匹配的元素进行分组，并将它们附加到新的div中：


$（'ul.testList li'）。每个（函数（索引，el）{
var li=$（本）；
var cls=li.attr（'class'）；
var match=$（'li[class=“”+cls+'“]）；
如果（match.length>0）{
var ul=$（'
）.attr（'id'，cls）；
匹配。附录（ul）；
ul.附录（“#输出”）
$（this.add（match）.addClass（'matched'）；
}
});
。匹配{
颜色：红色
}


应为红色，并分组在id名称为a的UL中
这是b
应为红色，并分组在id名称为c的UL中
应为红色，并分组在id名称为c的UL中
这是d
应为红色，并分组在id名称为a的UL中

乍一看，我建议：

// finding all direct children of the <ul> with the class 'testList'
// which are both <li> elements and have a 'class' attribute,
// iterating over them using the each() method:
$('ul.testList > li[class]').each(function () {

    // if a <ul> already exists with the class-name of the
    // current <li> element over which we're iterating
    // (which would lead to a truthy non-zero length):
    if ($('ul.' + this.className).length) {

        // we append this <li> element to the found <ul>:
        $(this).appendTo($('ul.' + this.className));
    } else {

        // otherwise we create a <ul> element:
        $('<ul>', {
            // give it the class-name of the current <li> element:
            'class': this.className
        // wrap it (the created <ul>) with an <li> element:
        }).wrap('<li></li>')
        // append the <ul> (wrap returns the original node) to
        // the current parent-node of the <li>:
        .appendTo(this.parentNode)
        // and append the original <li> node (appendTo also returns
        // the original node) to the <ul>:
        .append(this);
    }

    // adding the 'matched' class-name to the current <li>
    // element:
    this.classList.add('matched');
});



应为红色，并分组在id名称为a的UL中
2
应为红色，并分组在id名称为c的UL中
应为红色，并分组在id名称为c的UL中
2
应为红色，并分组在id名称为a的UL中
是否将
ul
附属于
.testList
？这是你要找的水吗？@guest271314是的，会附上。所以它将是：
所有
元素是否都只有一个类名？这样的嵌套将是无效的HTML；
的唯一有效子级是
@DavidThomas是的，我试图匹配的每个li只有一个类名对您的评论非常有用。无论出于何种原因，这对我的.ajax成功请求都不起作用@charlietfl做了所以我打了勾。非常感谢你的帮助。