将元素移动到兄弟元素之后。

Question

我有数百个。

<div class="post">

紧挨着彼此。

新元素通过 AJAX 更新并放置在现有元素的顶部。

现在有一个特殊的

<div id="ad1">

我想永远将其保持在第n个位置。

因此，我编写了该函数：

$(".post").each(function() {
    if(cnt>2){
        $('#ad1').after(this);
    }
    cnt++;
});

几乎可以工作，但是在 #ad1 之后移动的元素顺序相反，因为循环从 1 到 n，但元素总是直接添加到 #ad1 之后。

非常欢迎任何意见。

谢谢 拉斐尔

- Raphael Jeger

---

两个答案都可以，但如果我理解正确，它们移动了 #ad1，这可能会对该 div 中的 AdSense 代码造成问题。那么有什么优雅的解决方案可以将除前 n 个元素外的所有元素在 #ad1 之后移动到 #ad1 之后，而不改变它们的顺序？ - Raphael Jeger

添加了第二个解决方案（未经测试）。 - Blazemonger

谢谢！这段代码每次运行都会复制#ad1，所以在第二次运行后我看到了3个实例...不明白为什么，因为nextUntil文档中说它会获取到但不包括选择器之前的所有元素？ - Raphael Jeger

修正 -- 我使用了错误的 "after" 方法。 - Blazemonger

Answer 1

跳过循环。只需要一行代码即可完成此操作（在将任何新元素添加到顶部后运行它）：

$('.post').eq(n).before($('#ad1')); // don't forget .eq is zero-based

http://jsfiddle.net/mblase75/MD4b2/2/

或者将剩余的内容移动到广告下方：

$('.post').eq(n-1).nextUntil('#ad1').insertAfter($('#ad1'));

http://jsfiddle.net/mblase75/MD4b2/

- Blazemonger

---

Blazemonger，这太疯狂了...非常感谢! 我希望像这样保持我的广告高于折叠线是否符合Google Adsense的TOS？ - Raphael Jeger

你的第二种方法看起来很棒（如果我理解正确），它不会移动 #ad1，而是移动 .post，以便 #ad1 保持在位置 n？ - Raphael Jeger

如果是这样的话，这对于AdSense应该是100％安全的，不幸的是我不能点赞，因为我目前只有11个声望。 - Raphael Jeger

只需点击投票按钮旁边的复选标记来接受您喜欢的答案。这会鼓励其他人在未来与您合作。 - Blazemonger

哦...好的...没看到，对我的眼睛来说太小了 ;) 再次感谢！给我发私信，告诉我你的PayPal地址，我会给你汇款。 - Raphael Jeger

Answer 2

您也可以在这里使用nth-child：

$("div.post:nth-child("+n+")").before($('#ad1'));

- insomiac

---

抱歉，提交得太早了。正如您在上面所读到的，我在 #ad1 div 中加载 Adsense 广告。你和 Blazemonger 的方式不总是创建该 div 的新实例（例如删除和重新添加）吗？我认为如果是这种情况，它将无法与其中的 Adsense 一起使用，我担心尝试一下会出问题... - Raphael Jeger

不，它不会创建一个新实例。它只是复制该实例并将其放在 div post 之前。 - insomiac

这不会干扰其中的Google AdSense代码吗？ - Raphael Jeger

随着 div 实例被移动到不同的位置，我认为这应该不是问题。 - insomiac