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

发布于 2024-12-06 02:06:05 字数 1872 浏览 3 评论 0原文

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

我想实现这个： * 也就是说，让child 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#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 内。内容是动态生成的。

原文

I need to move li element out of its parent ul and into master parent ul.

I tried this:

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

I want to achieve this:
* that is, make child li#5child to get out of ul and li and appear right below 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>

Instead I get:
* append drops li outside, but puts it at the very end of 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>

I hope this explains it better than using words. It's pretty simple as a concept, but with my limited skills, I couldn't come up with anything better.

help! :)

*notice: naming and numbering of lis is arbitrary. And child comment can appear within any # li. Content is dynamically generated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城凉梦凉人心 2024-12-13 02:06:05

试试这个：

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

Try this one:

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

This will solve your problem no matter how many ul child elements exist, and no matter how many li child elements they have.

回复收藏 0 原文

倾其所爱 2024-12-13 02:06:05

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

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

Try to use method .after().
Replace $('ul#listcomments').append( $('.children>li') ); to

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

回复收藏 0 原文

源来凯始玺欢你 2024-12-13 02:06:05

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

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

You can also use the unwrap() method:

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

回复收藏 0 原文

征棹 2024-12-13 02:06:05

我想你可以使用这个

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/贾松根纳罗/aDWJF/1/

I think you could use this

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

Working Example: http://jsfiddle.net/jasongennaro/aDWJF/1/

回复收藏 0 原文

~没有更多了~