dongmu5246
2014-06-04 18:13
浏览 76

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

This question already has an answer here:

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

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

First attempt:

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

Second attempt:

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

Third attempt:

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

Fourth attempt:

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

Fifth attempt:

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

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!

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • du7133 2014-06-04 18:35
    已采纳

    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/

    点赞 打赏 评论
  • douzhang1364 2014-06-04 18:23

    you need to put the new ul inside of an li, you cannot have ul -> ul, it is invalid markup.

    so it would look like this

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

    to create that in jquery would be like this

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

    you can take it a step further and add content to the 'li' elements as desired

    点赞 打赏 评论

相关推荐 更多相似问题