javascript - 如何将 标签包裹在 标签内

Question

这个问题已经有答案了:

Wrap every 3 divs in a div (6 个回答)

已关闭 9 年前。

我有这个，当我单击 .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 的 child 元素，它应该用 li 包裹起来元素。用于包装每 3 个 li与<li><ul></ul></li>您可以使用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/