jquery - 将li元素移出父级ul，并保持其位置

Question

jquery - 将li元素移出父级ul，并保持其位置

4

我需要将li元素移出其父级ul，并移到主父级ul中。

我尝试了以下方法：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">

$( init );

function init() {

 // Move
  $('ul#listcomments').append( $('.children>li') );
  // Delete
  $('.children').remove();
}

</script>

</head>
<body>



<ul id="listcomments">
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
<li>Comment 4</li>
<li>Comment 5 <ul class="children"><li>Child comment of #5 is this</li></ul></li>
<li>Comment 6</li>
<li>Comment 7</li>
<li>Comment 8</li>
</ul>

</body>
</html>

我希望实现以下目标： * 即使让子级li#5child脱离ul和li，出现在li的正下方。

<ul id="listcomments">
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
<li>Comment 4</li>
<li>Comment 5</li>
<li>Child comment of #5 is this</li>
<li>Comment 6</li>
<li>Comment 7</li>
<li>Comment 8</li>
</ul>

相反，我得到的是： * 将 li 添加到 ul#listcomments 外部，但将其放在最后。

<ul id="listcomments">
<li>Comment 1</li>
<li>Comment 2</li>
<li>Comment 3</li>
<li>Comment 4</li>
<li>Comment 5 </li>
<li>Comment 6</li>
<li>Comment 7</li>
<li>Comment 8</li>
<li>Child comment of #5 is this</li>
</ul>

我希望这比用文字解释更容易理解。这个概念非常简单，但由于我的技能有限，我想不出更好的东西。

求助！：）

*注意：li的命名和编号是任意的。子评论可以出现在任何# li中。内容是动态生成的。

- user796443

4个回答

1

尝试使用方法.after()。将$('ul#listcomments').append( $('.children>li') );替换为

$($('.children')[0].parentNode).after($('.childer > li'));

- Vladimir Petrosyan

我发现这种方法存在问题。如果我要从li中获取超过两个子元素，那么层次结构就会混乱。例如，在#1和#5下有第一个子评论，这种情况下未包装的子评论#1和#5都将归属于#1父评论下。 - user796443

1

你也可以使用 unwrap() 方法：

$(".children > li").unwrap();

- Frédéric Hamidi

0

我认为你可以使用这个

var a = $('ul.children').html();
  //grab the li

$('ul.children').remove();
  //remove the ul

$('ul#listcomments li:eq(4)').after(a);
  //add the li after the 5th li in the  parent list

工作示例：http://jsfiddle.net/jasongennaro/aDWJF/1/

- Jason Gennaro

嗨，列表的命名和编号是任意的。子评论可以出现在任何 #li 中。因此，您的代码只适用于这种特定情况，但对于任何动态内容都不适用。 - user796443

这是有用的信息，@SandroDzneladze。你应该编辑问题并将其包含在内。 - Jason Gennaro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gitesh.tyagi · Accepted Answer

尝试这个：

<script type="text/javascript">
$( init );

function init() {
    $('.children').each(function() {
        // save
        $a=$(this).children('li');
        // Move
        $($a.parent().parent()).after($a);
        // Delete
        $(this).remove();
    });
}
</script>

无论有多少个 ul 子元素，以及它们有多少个 li 子元素，这都将解决您的问题。