如何将子元素移动到它们各自的祖父母元素中

Question

我是jquery新手，我正在使用它来让自己熟悉这个著名的框架。我喜欢jquery选择器的"声明性"特性，它可以抓取一堆元素并对它们做一些事情，而不需要显式地循环遍历每个匹配的元素，这很像SQL。在探索jquery的过程中，我给自己设置了一些场景/挑战，看看我是否能解决它们，以测试我的理解。这里有一个问题，我试图解决最好用一行代码(只使用一个分号)。

<div>
    <div class="parent">
        <div></div>
    </div>
</div>
<div>
    <div class="parent">
        <div></div>
    </div>
</div>
<div>
    <div class="parent">
        <div></div>
    </div>
</div>

我的问题是这样的。我有三个<div>，一个嵌套在另一个内部，创建一个"祖父母-父母-孩子"关系。我有三个如上所述的安排(三个祖父母，他们是彼此的兄弟姐妹)。所以我的问题是，我如何将所有的孩子移动到他们各自的祖父母<div> ?换句话说，我试图让孩子们成为他们自己的父母的兄弟姐妹。下面是我想要达到的结果

<div>
    <div class="parent">
    </div>
    <div></div>
</div>
<div>
    <div class="parent">
    </div>
    <div></div>
</div>
<div>
    <div class="parent">
    </div>
    <div></div>
</div>

这是我尝试过的，但无济于事

$('.parent > div').appendTo($(this).parent());

我甚至试过

$('.parent > div').appendTo($(this).parent().parent());

我想我在这里滥用$(this)。我想不出一个不使用循环就只用一行的方法。我想我可能能够做到这一点与。each()循环，但想尝试实现它没有。

Answer 1

另一个没有循环的解决方案(也许它是jquery本身的循环):

$('.parent').after(function() {
    return $('div', this);
});

Answer 2

你必须循环遍历它们:

$('.parent > div').each(function() {
    $(this).parent().after(this);
});

你也可以这样写:

$('.parent > div').each(function() {
    $(this).insertAfter($(this).parent());
});

Answer 3

$('.parent div').each(function(){$(this).clone().appendTo($(this).parent().parent());$(this).remove()})

Answer 4

到目前为止，每个答案都使用each，这是最好的方法。但是为了更奇怪，这里有另一种避免显式循环的方法:

$('.parent > div').unwrap().parent().contents().filter(function(){return this.nodeType===3}).wrap('<div class="parent">');

(它确实在内部循环很多，filter是一个循环，但jQuery没有内置的方式来获取文本节点)