Question

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

我想实现这个目标： *也就是说，让孩子李＃5孩子脱离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>

相反，我得到： *在外面添加drop 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>

我希望这比使用单词更能解释它。它作为一个概念非常简单，但凭借我有限的技能，我无法想出更好的东西。

帮助！：）

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

Answer 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个子元素，这都可以解决您的问题。

Answer 2

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

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

Answer 3

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

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

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

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

4 个答案:

试试这个：