Question

我有这个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>

我正在使用以下jQuery代码来获取li类的所有.parent元素，并希望向div类显示名为li的所有.all元素。

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

现在将其添加到.all div类中，但是将<ul>和</ul>元素添加到li元素上方，但应将所有li元素包装起来

我想要的东西例如

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

但显示：

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

您的代码

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

应更改

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

Answer 2

对于<ul>内的append元素，只需在类find()的{{1}}元素上使用<div>来查找新的附加.all标记，然后添加将<ul>放在上面：

<li>

您可以查看下一个工作示例：

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

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

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

Answer 3

jquery代码可以这样重写：

$(".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>

您遇到问题是因为您以错误的方式使用prepend方法。

.prepend用于将元素添加到选择器。由于您使用ul添加了$(".all").prepend("<ul>");标签。您无需再次添加该标签（$(".all").prepend("</ul>");）。

此外，您尝试在div标签（li元素）内添加新的.all标签。可以通过在选择器ul内添加$(".all ul")来解决此问题

Answer 4

您可以使用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

无需创建新的<ul>或使用循环。只需复制现有的<ul>，找到其<a>元素，然后.unwrap()：

$(".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>

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

5 个答案: