Jquery 如何将children元素移动到各自的祖父母元素中

我是jquery的新手，正在使用它来熟悉这个著名的框架。我喜欢jquery选择器的“声明性”特性，它可以抓取一堆元素并对它们做一些事情，而无需显式地遍历每个匹配的元素，就像SQL一样。在探索jquery时，我会给自己一些场景/挑战，看看是否可以解决它们来测试我的理解能力。这里有一个问题，我想用一行代码（只使用一个分号）来解决

我甚至试过

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

---

我想我在滥用

$（这个）

。我想不出一种方法，只使用一条线而不使用循环。我想我可能可以使用.each（）循环来实现它，但我想尝试在不使用.each（）循环的情况下实现它。感谢您阅读此文章。

您必须在它们上面循环：

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

你也可以写：

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

---

您必须在它们上面循环：

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

你也可以写：

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

---

到目前为止，每个答案都使用了

每个
，这是最好的方法。但为了让人觉得很奇怪，这里有另一种避免显式循环的方法：

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

$（'.parent>div'）.unwrap（）.parent（）.contents（）.filter（函数（）{返回this.nodeType==3}）.wrap（''）；

（它在内部确实循环了很多次，
filter
是一个循环，但是jQuery没有一种内置的方式来获取文本节点）
好吧，到目前为止，每个答案都使用了
每个
，这是最好的方法。但为了让人觉得很奇怪，这里有另一种避免显式循环的方法：

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

$（'.parent>div'）.unwrap（）.parent（）.contents（）.filter（函数（）{返回this.nodeType==3}）.wrap（''）；

（它确实在内部循环了很多次，而且
过滤器
是一个循环，但是jQuery没有一种内置的方式来获取文本节点）
另一个没有循环的解决方案（可能它本身就是jQuery中的一个循环）：

另一个没有循环的解决方案（可能是jquery本身中的循环）：

就像我想放弃使用循环一样。但我想有时候我们不能两全其美。为了满足我的好奇心，我尝试了什么do（用简单的英语）？或者，如果你能向我解释为什么它不起作用，事实上它甚至什么都不起作用。@TwistedWhisper:没什么，真的
此
引用了
窗口
，该窗口没有
.parent（）
，因此
div
没有可移动的内容。这就解释了很多问题。我觉得
$（这个）
指的是
$（'.parent>div'）
。谢谢你，因为我想放弃使用循环。但我想有时候我们不能两全其美。为了满足我的好奇心，我尝试了什么do（用简单的英语）？或者，如果你能向我解释为什么它不起作用，事实上它甚至什么都不起作用。@TwistedWhisper:没什么，真的
此
引用了
窗口
，该窗口没有
.parent（）
，因此
div
没有可移动的内容。这就解释了很多问题。我觉得
$（这个）
指的是
$（'.parent>div'）
。感谢探索jquery如何工作的一种有趣的方法，尽管这是一种非常详细的方法=）@TwistedWhisper，您设置了不使用
每个
的挑战！接受挑战，请查看我的答案，以获得另一个解决方案，而不是每个解决方案；）探索jquery如何工作的一种有趣的方法，尽管非常详细=）@TwistedWhisper，您设置了一个挑战，即不使用
每个
！接受挑战，请查看我的答案，以获得另一个解决方案，而不是每个解决方案；）这很简洁，尽管仍然包含两个分号。谢谢，那样更好吗<代码>$（'.parent'）。在（函数（）{return$（'div'，this）}之后我喜欢这个，它更简洁，没有显式循环。我不知道
后的
可以使用函数。优雅@TwistedWhisper，这是一个很好的解决方案，但一般来说，不要因为不喜欢
每个
而混淆代码。未来的维护者会在你睡觉时追捕你并勒死你。@Dave我完全同意。每一个都不是那么糟糕，大多数时候你不知道jquery在幕后到底做了什么。但我喜欢这样的东西：）这很简洁，虽然仍然包含两个分号。谢谢，那样更好吗<代码>$（'.parent'）。在（函数（）{return$（'div'，this）}之后我喜欢这个，它更简洁，没有显式循环。我不知道
后的
可以使用函数。优雅@TwistedWhisper，这是一个很好的解决方案，但一般来说，不要因为不喜欢
每个
而混淆代码。未来的维护者会在你睡觉时追捕你并勒死你。@Dave我完全同意。每一个都不是那么糟糕，大多数时候你不知道jquery在幕后到底做了什么。但我喜欢这样的事情：）
$('.parent > div').unwrap().parent().contents().filter(function(){return this.nodeType===3}).wrap('<div class="parent">');

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