1

我是 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() 循环来做到这一点，但我想尝试在没有的情况下实现它。谢谢您阅读此篇。

4

4 回答 4

3

您将不得不遍历它们：

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

你也可以写：

$('.parent > div').each(function() {
    $(this).insertAfter($(this).parent());
});
于 2013-03-29T22:11:13.320 回答
3

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

$('.parent').after(function() {
    return $('div', this);
});
于 2013-03-29T22:28:59.133 回答
0 
$('.parent div').each(function(){$(this).clone().appendTo($(this).parent().parent());$(this).remove()})
于 2013-03-29T22:13:57.127 回答
0

好吧，到目前为止，每个答案都使用each了 ，这是最好的方法。但是为了简单起见，这是另一种避免显式循环的方法：

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

（它确实在内部循环了很多，并且filter是一个循环，但是 jQuery 没有内置的方法来获取文本节点）

于 2013-03-29T22:26:03.280 回答