如何在<ul>标签内包装<li>标签[重复]

Question

This question already has an answer here:

• Wrap every 3 divs in a div 6 answers

I have this and when I click the button inside .items class creates <li> elements like this:

<ul class="items">                                           <ul class="items">
    <li>img1</li>                                                <ul>
    <li>img2</li>       but i want every 3 <li>                      <li>img1</li>
    <li>img3</li>       to wrap them into a new <ul>                 <li>img2</li>
    <li>img4</li>       --------------------------------->           <li>img3</li>
    <li>img5</li>                                                </ul>
    <li>img6</li>                                                <ul>
    <li>img7</li>                                                    <li>img4</li>
    <li>img8</li>                                                    <li>img5</li>
    <li>img9</li>                                                    <li>img6</li>
    ...                                                          </ul>
</ul>                                                            ...
                                                             </ul>       

index.php

<div class="articles" id="projects">
    <div class="items">
        <li class="item">

            <img class="proj-imgs" src="images/project-imgs/" data-field="projects" width="100%" height="100%">

        </li>
    </div>
    <div class="morebox">
        <a href="#" class="items-load">Load more</a>
    </div>
</div>

I tried these but with no luck:

First attempt:

$('.item').first().before("<ul>");
$('.item').last().after("</ul>");

Second attempt:

$( "<ul>" ).insertBefore( ".item:first-child" );
$( "</ul>" ).insertAfter( ".item:last-child" );

Third attempt:

$( ".items" ).prepend( "<ul>" );
$( ".items" ).append( "</ul>" );

Fourth attempt:

$(".items li").each(function() {
    $(this).find("li").wrapAll("<ul></ul>");
});

Fifth attempt:

$('.items li').each(function(){
    var uls = $('li', this);
    for(var i = 0; i < uls.length; i+=3) {
        uls.slice(i, i+3).wrapAll('<ul></ul>');
    }
});

If you can help me I would appreciated!! If you want the other files such as the javascript file, php or database just tell me to add them! Thanks in advance!

</div>

Answer 1

That's not how DOM works, you can't insert opening and closing tags separately, you should insert an element. Also an ul can't be child of another ul element, it should be wrapped with a li element. For wrapping every 3 lis with <li><ul></ul></li> you can use the wrapAll method:

var $li = $('.items li');

for (var i = 0; i < $li.length; i+=3)
    $li.slice(i, i+3).wrapAll('<li><ul></ul></li>');

http://jsfiddle.net/zzRNQ/