jquery insert html into list before a child ul-tag

Question

Hello

I have this:

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3
      <ul>
        <li>3-1</li>
      </ul>
    </li>
  </ul>

But want this:

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="new_ul">
      <ul>
        <li>3-1</li>
      </ul>
    </li>
  </ul>

With other words I need to insert

</li><li class="new_ul">

after the 3 in the list. I have played with .append and .prepend but witout beeing able to insert at the right place.

Any help would be appreciated

Br. Anders

---

There is a correct answer below. If you use that then it will run through only one level. But same example is is capable of running through multible levels. Just change ('>li>ul') to ('ul') and all nested ul's will be found and handled. Perfect!

(will run through endless levels of nested ul's)

$('#pickme').find('ul').each(function() {
    $(this).wrap('<li class="new_ul"></li>').parent().insertAfter($(this).parent().parent());
});

In this case this:

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3
      <ul>
        <li>3-1
          <ul>
            <li>3-1-1</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

Will be:

  <ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li class="new_ul">  <<new li
      <ul>
        <li>3-1</li>
        <li class="new_ul">  <<new li
          <ul>
            <li>3-1-1</li>
          </ul>
        </li>
      </ul>
    </li>
    </li>
  </ul>

Answer 1

Use .html(), which will get you the inner text. Manipulate the string. Then use .html(newHtml) to set the new inner text.

Your problem with prepend and append is that you don't need to prepend or append, you need to insert in the middle (after the 3).

Answer 2

This will work for you;

// get the #pickme element
var pickme = $('#pickme');

// find all the LI elements that are directly under #pickme
var pickmeLIs = pickme.find('>li');

// find all the UL elements that are directly under our found LI elements
var pickmeULs = pickmeLIs.find('>ul');

// loop through our UL elements
pickmeULs.each(function() {

    // wrap this UL element in the new LI element
    $(this).wrap('<li class="new_ul"></li>');

    // select the wrapping LI we just added to the UL element
    var wrapingLI = $(this).parent();

    // find our original parent LI element
    var originalParent = $(this).parent().parent();

    // move this and the new wrapping LI to the right place
    wrapingLI.insertAfter(originalParent);
});

this can be condensed down to;

$('#pickme').find('>li >ul').each(function() {
    $(this).wrap('<li class="new_ul"></li>').parent().insertAfter($(this).parent().parent());
});

Answer 3

last-child selector will ensure that you add new item after it.

You can use that as

$('<li class="new_ul">4</li>').appendTo("ul#pick_me > li:last-child");

Answer 4

If you have a way of knowing how many list items there are in #pickme you can use $('#pickeme li:eq(theIndex)') otherwise, use this:

$('#pickme li:last').after('<li class="new_ul"><ul><li>3-1</li></ul></li>');

Tested and works.

UPDATE

Thanks to bobince and Myra I now have the following which does exactly what you're asking for:

$('#pickme li:last-child').replaceWith('<li class="new_ul"><ul><li>3-1</li></ul></li>');

Output:

<ul id="pickme">
    <li>1</li>
    <li>2</li>
    <li class="new_ul">
      <ul>
        <li>3-1</li>
      </ul>
    </li>
</ul>