Javascript 将列表项目包装为两个ul

尝试包装/拆分列表项并通过替换列表项中的文本来添加类，如下例

原始Html：

<div class="widget-content">
    <ul>
        <li><span class="label">textone</span> Test Content</li>
        <li><span class="label">texttwo</span> Test Content</li>
        <li><span class="label">texttwo</span> Test Content</li>

        <li><span class="label">texttwo</span> Test Content</li>
        <li><span class="label">textone</span> Test Content</li>
        <li><span class="label">textone</span> Test Content</li>
    </ul>
</div>

不工作，请检查。

---

提前感谢。

这里有一个解决方案，根据

.label

var-widget=$（'.widget-content'），
ul=widget.find（'ul'），
类=[‘左’、‘右’]；
ul.find（'li'）。每个（函数（）{
var span=$（this.find（'.label'）；
var text=span.text（）；
var parent=widget.find（'[data parent=“'+text+''”]）；
if（parent.length==0）{
widget.append（$（“
”）.append（此））
}否则{
parent.append（这个）
}
ul.移除（）；
});
.left{color:green}
.right{color:blue}


textone测试内容
文本二测试内容
文本二测试内容
文本二测试内容
textone测试内容
textone测试内容

遵循您的代码（相同的原则），这是另一种解决方案：


var$widget=$（'.widget-content'）；
var元素={}；
$widget.find（'li'）。每个（函数（）{
var key=$（this.find（'span'）.text（）；
//如果键还没有定义，我们就定义一个数组
元素[键]=元素的类型[键]=“未定义”？[]：元素[键]；
//添加

元素[key].push（$（this）.text（））；
}).parent（）.remove（）；//清除

$。每个（元素、函数（索引、值）{
var$ul=$（“
”）.addClass（索引）；
$.each（值、函数（）{
$ul.append（$（'
'）.text（this））；
});
$widget.append（$ul）；
});
.textone{
颜色：红色；
}
.text2{
颜色：蓝色；
}


textone测试内容
文本二测试内容
文本二测试内容
文本二测试内容
textone测试内容
textone测试内容

jquery
wrapAll（）
是另一种简短而甜蜜的方式

// get unique texts
var uniTxt = [];
$('.label').text(function(index,txt){
  ( $.inArray(txt,uniTxt) > -1) ? null : uniTxt.push( txt ) ;
});

// rearrange items
$(uniTxt).each(function(index, className){
  $('li').filter(':contains('+className+')')
  .unwrap()                             // remove initial parent ul 
  .wrapAll('<ul class='+className+'>'); // wraps similar txt with a Ul & add class
});

//获取唯一文本
var uniTxt=[]；
$（'.label'）.text（函数（索引，txt）{
（$.inArray（txt，uniTxt）>-1）？null:uniTxt.push（txt）；
});
//重新排列项目
$（uniTxt）.each（函数（索引，类名）{
$（'li'）.filter（'：包含（'+className+'））
.unwrap（）//删除初始父对象
.wrapAll（“
”）；//用ul&add类包装类似的文本
});

那么，你是想每三项就把清单分成两半，还是以其他方式？它不是很清楚你肯定不是由span的内容决定的，因为这似乎就是我想要的输出，比如第二个HTML示例，通过替换文本内容从
span class=“label”
获取类。检查第二个HTML示例。我想要它。嗨，想要一个简单的改变：如何给新的父级赋予太平洋类名
ul
。？不要用文本替换
class=“label”
我的意思是将不同的自定义类名更改为不同的父级“ul”，那么您希望使用什么类名，你需要具体说明你想要什么第一个
ul
将是类名
left
，第二个
ul
将是类名
right
编辑答案以添加这些类，并使它们更容易更改为你想要的任何名称，以便将太平洋类名赋予新的父类
ul
。？不要从
class=“label”
中替换文本，只需更改
index
行
var$ul=$（“
”）上的值即可。addClass（index）与您的
pacific
类。我的意思是将不同的自定义类名更改为不同的父级“ul”
var arr = []; // array to store `li` elements
var widget = $(".widget-content");

$(".widget-content li").each(function(index, el) {
  var html = el.outerHTML;
  // number at `label` text
  var curr = $(".label", this).text().trim().slice(-1);
  if (arr[curr - 1]) {
    arr[curr - 1].push(html)
  } else {
    arr[curr - 1] = [html];
  }
});

widget.html(""); // remove existing `html`

$.each(arr, function(key, val) {
  var li = val.join("");
  $(".widget-content").append($("<ul/>", {
    html: li,
    "class":$(li).eq(0).find(".label").text().trim()
  }))
})

// get unique texts
var uniTxt = [];
$('.label').text(function(index,txt){
  ( $.inArray(txt,uniTxt) > -1) ? null : uniTxt.push( txt ) ;
});

// rearrange items
$(uniTxt).each(function(index, className){
  $('li').filter(':contains('+className+')')
  .unwrap()                             // remove initial parent ul 
  .wrapAll('<ul class='+className+'>'); // wraps similar txt with a Ul & add class
});