Javascript jquery排序和组li元素

假设我有一个div或UL下的项目列表。我想获取所有具有相同title属性的列表项，并在其周围环绕一个UL。不过，下一部分是，我希望UL处于具有相同属性的LI之下。所以，我基本上是在分组

所以。。。。我从

<li>Insurance</li>
<li>Education</li>
<li>Sports</li>
<li>Construction</li>
<li title ="Insurance">Malpractice</li>
<li title ="Construction">Carpentry</li>
<li title ="Education">College</li>
<li title ="Insurance">Automobile</li>
<li title ="Education">High School</li>
<li title ="Construction">Iron Worker</li>

保险

教育

运动

建筑

不当行为

木工

学院

汽车

高中

钢铁工人 我想去

<li>Insurance
    <ul>
         <li title ="Insurance">Malpractice</li>
         <li title ="Insurance">Automobile</li>
   </ul>
</li>
<li>Education
    <ul>
         <li title ="Education">College</li>
         <li title ="Education">High School</li>
   </ul>
</li>
<li>Sports</li>
<li>Construction
    <ul>
         <li title ="Construction">Carpentry</li>
         <li title ="Construction">Iron Worker</li>
   </ul>
</li>

保险

• 不当行为
• 汽车

教育

• 学院
• 高中

运动

建筑

木工 钢铁工人

任何帮助都将不胜感激。显然是jquery和javascript领域的新手，所以我正试着围绕这一点思考。

//首先，我们获取所有不带title属性的项
// first we fetch all items without title attribute
var topLevel = $('li:not([title])');

// for each of those...
topLevel.each(function() {
  var li = $(this),
      // ... we get its text ...
      title = li.text(),
      // ... and other li elements with the corresponding title
      children = $('li[title="' + title + '"]');

  // if there are any...
  if (children.length > 0) {
    // ... create an empty list ...
    var ul = $('<ul></ul>');
    // ... fill it and ...
    children.appendTo(ul);
    // ... append it to the original li element
    ul.appendTo(li);
  }
});

var topLevel=$（'li:not（[title]））；
//对于每一个。。。
topLevel.each（函数（）{
var li=$（此），
//…我们得到它的文本。。。
title=li.text（），
//…和具有相应标题的其他li元素
children=$（'li[title=“”+title+“]”）；
//如果有的话。。。
如果（children.length>0）{
//…创建一个空列表。。。
var ul=$（“
”）；
//…填满它，然后。。。
儿童。附录（ul）；
//…将其附加到原始li元素
ul.附录（li）；
}
});

jQuery文档：，

这应该可以

$('#id li:not([title])').append('<ul />');

$('#id li[title]').each(function() {
    $(this).appendTo('#id li:contains(' + $(this).attr('title') + ') ul');
})

$（'id li:not（[title]）；
$（'#id li[title]'）。每个（函数（）{
$（this）.appendTo（'#id li:contains（'+$（this）.attr（'title'）+'））ul'）；
})

---

输入：

<div id="stuffs">
    <li>Insurance</li>
    <li>Education</li>
    <li>Sports</li>
    <li>Construction</li>
    <li title ="Insurance">Malpractice</li>
    <li title ="Construction">Carpentry</li>
    <li title ="Education">College</li>
    <li title ="Insurance">Automobile</li>
    <li title ="Education">High School</li>
    <li title ="Construction">Iron Worker</li>
</div>

保险
教育
运动
建筑
不当行为
木工
学院
汽车
高中
钢铁工人

jQuery:

​$("#stuffs li").each(function(){
    $("#stuffs li[title='"+$(this).text()+"']").appendTo($(this)).wrapAll("<ul />");
});​​​​​​​​​​

<div id="stuffs">
  <ul>
    <li>Insurance
        <ul>
            <li title="Insurance">Malpractice</li>
            <li title="Insurance">Automobile</li>
        </ul>
    </li>
    <li>Education
        <ul>
            <li title="Education">College</li>
            <li title="Education">High School</li>
        </ul>
    </li>
    <li>Sports</li>
    <li>Construction
        <ul>
            <li title="Construction">Carpentry</li>
            <li title="Construction">Iron Worker</li>
        </ul>
    </li>
  </ul>
</div>

​$（#stuffs li）每个（函数）{
$（“#stuffs li[title=”+$（this.text（）+“]）”）.appendTo（$（this））.wrapAll（“
”）；
});​​​​​​​​​​

输出：

​$("#stuffs li").each(function(){
    $("#stuffs li[title='"+$(this).text()+"']").appendTo($(this)).wrapAll("<ul />");
});​​​​​​​​​​

<div id="stuffs">
  <ul>
    <li>Insurance
        <ul>
            <li title="Insurance">Malpractice</li>
            <li title="Insurance">Automobile</li>
        </ul>
    </li>
    <li>Education
        <ul>
            <li title="Education">College</li>
            <li title="Education">High School</li>
        </ul>
    </li>
    <li>Sports</li>
    <li>Construction
        <ul>
            <li title="Construction">Carpentry</li>
            <li title="Construction">Iron Worker</li>
        </ul>
    </li>
  </ul>
</div>

保险

不当行为
汽车


教育

学院
高中


运动
建筑

木工
钢铁工人

微笑：-）

---

此信息来自何处？您需要的不是有效的HTML。每个嵌套的

标记必须位于父

内（如
保险
（…）
）。哈，你说得对！！！！！！我忙着剪切、粘贴和设置场景，结果完全搞砸了。我也尝试了“不”（[title]）方法，但为什么这种方法不起作用呢？因为您选择了MooTools而不是jQuery作为要包含的库；-）没关系，我看的是右边而不是控制台，注意我在第一篇文章中没有有效的HTML。。。这可能会让事情有所不同。很抱歉请注意，最终输出所需的HTML无效。这可能会改变您的解决方案……然后使用
appendTo
而不是
insertAfter
。我更新了代码。是的，这是一个很好的解决方案+1我喜欢您的解决方案，但LIs不仅仅在OL或UL中有效吗？是的。但是他没有把它们写进问题里，我也没有。但是，好吧，让我们把它写进问题里吧！：）