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

Question

我有这个，当我单击 .items 类中的按钮时，会创建像这样的 <li> 元素：

<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>

我尝试了这些但没有运气：

第一次尝试：

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

第二次尝试：

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

第三次尝试：

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

第四次尝试：

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

第五次尝试：

$('.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>');
    }
});

如果你能帮助我，我将不胜感激！！如果您想要其他文件，例如 javascript 文件、php 或数据库，请告诉我添加它们！提前致谢！

Answer 1

这不是 DOM 的工作方式，你不能单独插入开始和结束标签，你应该插入一个 元素。同样ul 不能是另一个ul 元素的子元素，它应该用li 元素包裹。要使用 <li><ul></ul></li> 包装每 3 个 lis，您可以使用 wrapAll 方法：

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/

Answer 2

你需要把新的 ul 放在一个 li 里面，你不能有 ul -> ul，这是无效的标记。

应该是这样的

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

在 jquery 中创建是这样的

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>")))

您可以更进一步，根据需要向“li”元素添加内容