如何包装<标签内<ul>标签 - How to wrap <li> tags inside <ul> tags

How to wrap <li> tags inside <ul> tags

本文关键字：标签 ul 何包装包装 | 更新日期: 2023-09-27

我有这个，当我点击.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或数据库只是告诉我添加它们!提前感谢!

这不是DOM的工作方式，您不能分别插入开始和结束标记，您应该插入元素。另外，ul不能是另一个ul元素的子元素，它应该用li元素包装。对于用<li><ul></ul></li>包装每3个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/

你需要把新的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'元素添加内容