使用nth-child和.after？在两个div之间注入div。

Question

我有一堆div，它们通过PHP输出，都包含图像。我有一个单独的div，我想在第4个div之后注入，但我遇到了解决这个问题的问题。我正在使用Isotope对图像/ div进行网格化。

我的jQuery的一个例子：

$('.each-brewery-image:nth-child(4n)').after('<div>Test</div>');

我的HTML示例：

<div class="each-brewery-image">
   <a class="fancybox" rel="gallery1" href="#">
   <span>
       <img width="700" height="524" src="01.jpg" />
   </span>
   </a>
</div>
<div class="each-brewery-image">
   <a class="fancybox" rel="gallery1" href="#">
   <span>
       <img width="700" height="524" src="02.jpg" />
   </span>
   </a>
</div>
<div class="each-brewery-image">
   <a class="fancybox" rel="gallery1" href="#">
   <span>
       <img width="700" height="524" src="03.jpg" />
   </span>
   </a>
</div>

Answer 1

:nth-child(4n)选择第5个，第9个，第13个等元素。您可能需要:eq()：

$('.each-brewery-image:eq(3)').after('<div>Test</div>');

:eq()和:nth-child()为零索引，因此:eq(0)是第一项，:eq(1)是第二项，等等。

Answer 2

您现有的代码应该可以使用nth-child(4n)。

---

DEMO - 使用nth-child（4n）的原始代码

---

但是，如果您希望仅在第4个元素之后附加新div，则应使用eq(3)，否则您可能会得到意外结果。

eq()基于0，因此您需要将eq(0)用于第一个元素，依此类推。所以第四个是eq(3)。

---

DEMO - 使用eq(3)

在第4张图片后插入测试div

---

根据您的意见，即使eq()似乎也不起作用：

  

不幸的是，这没有奏效。可能与PHP有关   首先生成项目？

通常尝试将代码包装到document ready函数中以确保代码仅在DOM准备好后执行，类似于：

$(document).ready(function(){
    $('.each-brewery-image:eq(3)').after('<div>Test</div>');
});

如果您的代码在通过其他操作加载DOM之后注入HTML，则需要执行所需的代码，元素在DOM中以应用更改。

---

如果eq(3)似乎也有效，为什么要使用nth-child(4)/nth-child(4n)？

---

对于一般完整性，我认为添加此部分对于遇到此问题的任何未来用户可能会对使用nth-child()时可能遇到问题的用户有用。

使用nth-child()将匹配最后一个元素nth-child()之前的选择器的所有元素。

nth-child（x） - 未使用n

例如，如果您有2个ul，每个li，$('ul li:nth-child(2)')将选择 ul中的第二个元素。这与$('li:eq(1)', 'ul')相同。

---

DEMO - 使用ul选择每个$('ul li:nth-child(2)')中的第二个元素 DEMO - 使用$('li:eq(1)', 'ul')

与上述结果相同

---

nth-child（xn） - 使用n

另一方面，使用$('ul li:nth-child(2n)')将匹配li中的每秒ul。这是因为n像计数器一样使用。

---

DEMO - 使用ul

选择每个$('ul li:nth-child(2n)')中的每个第二个元素

---