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>

and I want to get to......

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

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

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>

and I want to get to......

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

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

• javascript
• jquery
• list
• grouping
• html-lists

• Where is this information ing from? – Cjueden Commented Feb 23, 2012 at 16:49
• What you want is not valid HTML. Each nested <ul> tag must be inside the parent <li> (like <li>Insurance<ul> (...)</ul></li>). – bfavaretto Commented Feb 23, 2012 at 17:00
• Hah, you're right!!!!!! I was so busy cutitng and pasting and setting up the scenario that I COMPLETELY screwed up the end result. – CeeMoney Commented Feb 23, 2012 at 17:12

3 Answers 3

Input:

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

Output:

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

Smile :-)

Demo here

// 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 documentation: :not(), [title], each(), appendTo()

This should work

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

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

A demo