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打包每3 <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/

Answer 2

你需要把新的ul放在里面，你不能有ul - ＆gt; 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>")))

您可以更进一步，将内容添加到＆＃39; li＆＃39;元素根据需要

如何在<ul>标签内包装<li>标签</ul> </li>

2 个答案: