How do I wrap individual elements with the same tag?

Question

Hi all,

I am trying to wrap individual li tags with a nested ul. For example I want the first HTML snippet, to be the second:

Snippet #1

          <ul class="lof-main-wrapper">
            <li class="featured">
              <h3><a href="#">Title</a></h3>
              <a href><img src="" /></a>
              <p class="kicker"></p>
              <p class="summary"></p>
            </li>

            <li class="featured">
              <h3><a href="#">Title</a></h3>
              <a href><img src="" /></a>
              <p class="kicker"></p>
              <p class="summary"></p>
            </li>
           </ul>

Snippet #2

          <ul class="lof-main-wrapper">
            <ul>
             <li class="featured">
               <h3><a href="#">Title</a></h3>
               <a href><img src="" /></a>
               <p class="kicker"></p>
               <p class="summary"></p>
             </li>
            </ul>

            <ul>
             <li class="featured">
               <h3><a href="#">Title</a></h3>
               <a href><img src="" /></a>
               <p class="kicker"></p>
               <p class="summary"></p>
             </li>
            </ul>
           </ul>

I am currently using the .wrap() function, which does what I want, but it duplicates the child elements into each nested ul, adding me more content to the DOM than what should be.

How do I prevent the duplication from occurring without painstakingly using the .remove() method to get rid of the duplicates?

FYI - I'm new to jQuery and JS in general, so any direction you can provide is appreciated.

Thanks,

Brion

Answer 1

You shouldn't wrap it to where a <ul> is directly inside a <ul> since that's invalid markup.

However, you can wrap them validly in a <li> with a <ul> inside using .wrap() to wrap each element the selector finds, like this:

$("#lof-main-wrapper li").wrap("<li><ul></ul></li>");

Answer 2

Use the wrap method

$('.lof-main-wrapper li').wrap('ul');

but as @Nick mentions in his answer, what you are trying to do is invalid, in HTML terms..

About the duplication you mention, you would have to show us the jQuery code you use..