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

你必须循环它们：

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

你也可以写：

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

Answer 2

没有循环的另一种溶剂（也许它是jquery本身的循环）：

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

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没有内置的方法来获取文本节点）

如何将儿童元素转移到各自的祖父母元素中

4 个答案: