如何包装< li> < ul>内的标签标签 [英] How to wrap <li> tags inside <ul> tags

问题描述

我有这个，当我单击.items类中的按钮时，会创建如下的<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

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:

第一次尝试:

$('.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或数据库，请告诉我添加它们！预先感谢！

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!

推荐答案

那不是DOM的工作原理，不能单独插入开始和结束标签，应该插入 element .同样，ul不能是另一个ul元素的子元素，应该用li元素包装.要用<li><ul></ul></li>每3个li包装，可以使用wrapAll方法:

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/

这篇关于如何包装< li> < ul>内的标签标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！