jquery排序和组li元素 [英] jquery ordering and group li elements

问题描述

假设我有一个div或UL下的项目列表。我想获取具有相同title属性的所有列表项并围绕它包装UL。接下来的部分是我希望UL具有相同属性的LI。所以，我试图基本上分组。

Let's say I have a list of items under a div or UL. I want to take all the list items with the same title attribute and wrap a UL around it. The next part though is that I want that UL to be under the LI with the same attribute. So, I'm trying to group basically.

所以....我开始......

So.... I start with.....

<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世界的新手，所以我试图将我的大脑包围起来。

Any help would be appreciated. Obviously new to the jquery and javascript world so I'm trying to wrap my brain around this.

推荐答案

// 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] ， 每个（） ， appendTo（）

jQuery documentation: :not(), [title], each(), appendTo()

这篇关于jquery排序和组li元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！