如何使用jQuery将所有li元素包装在ul元素中？

Question

I have this html:

<li>
    <a href=""></a>
    <ul class="parent">
        <li><a href="">one</a></li>
        <li><a href="">two</a></li>
        <li><a href="">three</a></li>
        <li><a href="">four</a></li>
        <li><a href="">five</a></li>
        <li><a href="">six</a></li>
    </ul>
</li>
<li>
    <a href=""></a>
    <ul class="parent2">
        <li><a href="">one</a></li>
        <li><a href="">two</a></li>
        <li><a href="">three</a></li>
        <li><a href="">four</a></li>
        <li><a href="">five</a></li>
        <li><a href="">six</a></li>
    </ul>
</li>
<div class="all"></div>

I am using following jQuery code to get all li elements of .parent class and want to show that all li elements to div class called .all .

<script>
$(".all").prepend("<ul>");
$( ".parent li" ).each(function( index ) {
    $(".all").append("<li>" + $(this).text() + "</li>");
});
$(".all").prepend("</ul>");
</script>

now it's adding to .all div class but <ul> and </ul> element is adding above the li elements but it's should be wrap the all li elements.

what I want for eg:

<ul>
    <li>one</li>
    res of the li..
</ul>

but showing:

<ul></ul>
<li>one</li>
res of the li..

Answer 1

 $(".all").prepend("<ul>"); $( ".parent li" ).each(function( index ) { $(".all ul").append("<li>" + $(this).text() + "</li>"); }); $(".all").prepend("</ul>"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <a href=""></a> <ul class="parent"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <li> <a href=""></a> <ul class="parent2"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <div class="all"></div> 

Your code

$(".all").append("<li>" + $(this).text() + "</li>");

Should be changed

$(".all ul").append("<li>" + $(this).text() + "</li>");

Answer 2

For append elements inside the <ul> just use find() over the <div> element with class .all to find the new appended <ul> tag, and then add alls the <li> on it:

<script>
$(".all").append("<ul>");
var ul = $(".all").find("ul");

$( ".parent li" ).each(function( index )
{
    ul.append("<li>" + $(this).text() + "</li>");
});
</script>

You can check the next working example:

 $(".all").append("<ul>"); var ul = $(".all").find("ul"); $( ".parent li" ).each(function( index ) { ul.append("<li>" + $(this).text() + "</li>"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <a href=""></a> <ul class="parent"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <li> <a href=""></a> <ul class="parent2"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <div class="all"></div> 

Answer 3

The jquery code can be rewritten like this:

 $(".all").append("<ul>"); $( ".parent li" ).each(function( index ) { $(".all ul").append("<li>" + $(this).text() + "</li>"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <a href=""></a> <ul class="parent"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <li> <a href=""></a> <ul class="parent2"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <div class="all"></div> 

You're getting the problem because you're using prepend method as a wrong way.

.prepend is used to add an element to the selector. Since you added ul tag using $(".all").prepend("<ul>"); . You don't need to add this tag again ( $(".all").prepend("</ul>"); ).

Also, you're trying to append new li tag inside the div tag ( .all element). It can be fixed by adding ul inside the selector $(".all ul")

Answer 4

You can use prependTo()

 $(".all").prepend("<ul class='new'>"); $( ".parent li" ).each(function( index ) { $(".all").append("<li>" + $(this).text() + "</li>"); }); $(".all li").prependTo(".new"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <a href=""></a> <ul class="parent"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <li> <a href=""></a> <ul class="parent2"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <div class="all"></div> 

Answer 5

No need to create a new <ul> or use loops. Simply duplicate the existing <ul> , find its <a> elements, and .unwrap() them:

 $(".parent") .clone() //Duplicate the <ul> .appendTo(".all") //Put the copy in the <div> .find("a") //Find all of its <a> elements .contents().unwrap(); //Strip the <a> tag, but leave the text 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li> <a href=""></a> <ul class="parent"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <li> <a href=""></a> <ul class="parent2"> <li><a href="">one</a></li> <li><a href="">two</a></li> <li><a href="">three</a></li> <li><a href="">four</a></li> <li><a href="">five</a></li> <li><a href="">six</a></li> </ul> </li> <div class="all"></div>