Question

假设我有一个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世界来说显然是新手，所以我试图将我的大脑包围起来。

Answer 1

输入：

<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>

微笑： - ）

Demo here

Answer 2

// 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);
  }
});

jQuery文档：:not()，[title]，each()，appendTo()

Answer 3

这应该有效

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

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

A demo

jquery排序和组li元素

3 个答案: