jquery ordering and group li elements

Question

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.

Answer 1

// 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()

Answer 2

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

Answer 3

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