Javascript与before（）和after（）的混淆

我有一个项目，我使用before（）和after（）javascript方法。我是这样使用它的：

HTML:

第1页奇数
第2页偶数
第3页奇数
第4页偶数
第5页奇数
第6页偶数
第7页奇数
第8页偶数

JAVASCRIPT:

<script>
$(window).ready(function() {
    $('.main:odd').before("<div class='left'></div>");
});

$(window).ready(function() {
    $('.main:even').after("<div class='right'></div>");
});
</script>

$（窗口）.ready（函数（）{
$（'.main:odd'）。在（“”）之前；
});
$（窗口）.ready（函数（）{
$（'.main:偶数'）。在（“”）之后；
});

---

因此，这将在class.main之前的奇数div中创建名为.left的新div元素，另一个元素也是如此。问题是它一直工作到第6页，之后它将不会创建另一个元素。将html代码和想法想象成一本书，当网站打开时，它显示第1页，当用户点击next按钮时，显示第2页和第3页，依此类推。如果有人知道为什么会这样。提前谢谢。抱歉，我是javascript新手。

我发现了问题所在。它是如此简单，我必须将我的代码移到我文件中另一个代码之上才能工作！谢谢你的帮助

嗯，这对我很管用。。为我工作。。。除非第6页之后的元素不是动态创建的，否则这只是一个示例代码，而不是真正的代码。。也许我的脚本中的其他代码有问题…谢谢大家的帮助！

<script>
$(window).ready(function() {
    $('.main:odd').before("<div class='left'></div>");
});

$(window).ready(function() {
    $('.main:even').after("<div class='right'></div>");
});
</script>