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

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>

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/

you need to put the new ul inside of an li, you cannot have ul -> ul, it is invalid markup.

so it would look like this

<ul>
   <li>
      <ul>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
   <li>
      <ul>
         <li></li>
         <li></li>
         <li></li>
      </ul>
   </li>
</ul>

to create that in jquery would be like this

var mainUl = $("<ul>");
mainUl.append($("<li>").append($("<ul>").append("<li>").append("<li>").append("<li>")))
mainUl.append($("<li>").append($("<ul>").append("<li>").append("<li>").append("<li>")))
mainUl.append($("<li>").append($("<ul>").append("<li>").append("<li>").append("li>")))

you can take it a step further and add content to the 'li' elements as desired