jquery - 将 li 元素移出父 ul，并保留位置答案

【问题标题】：jquery - moving li element out of the parent ul, and retaining positionjquery - 将 li 元素移出父 ul，并保留位置
【发布时间】：2011-09-24 10:58:35
【问题描述】：

我需要将 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>

相反，我得到： * append 将 li 放在外面，但放在 ul#listcmets 的最后

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

我希望这比使用文字更好地解释它。这个概念很简单，但由于我的技能有限，我想不出更好的办法。

帮助！ :)

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

【问题讨论】：

标签： jquery dom elements

【解决方案1】：

试试这个：

<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 子元素有多少，这都能解决您的问题。

【讨论】：

这种方法也行不通。如果我有超过 1 个子评论，我最终会得到重复 :( 像这样：评论 1 #1 的子评论是这个 #5 的子评论是这个评论 2 评论 3 评论 4 评论 5 #1 的子评论是#5 的这个子评论是这个评论 6 评论 7 评论 8

【解决方案2】：

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

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

【讨论】：

我发现这种方法有问题。如果我有两个以上的子元素要从 li 中取出，层次结构就会流动。例如 #1 和 #5 下的第一个子评论，在这种情况下，展开的子评论 #1 和 #5 都将放在 #1 父评论下。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我觉得你可以用这个

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/

【讨论】：

嗨，lis的命名和编号是任意的。并且子评论可以出现在任何#li 中。所以你的代码只能在这种特殊情况下工作，但任何动态的东西都不适合。
很高兴知道@SandroDzneladze 的信息。您应该编辑问题以包含它。