2

我有一堆 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>
4

2 回答 2

3

:nth-child(4n)选择第 5、9、13 等元素。你可能想要:eq()：

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

:eq()并且:nth-child()是零索引:eq(0)的，第一项:eq(1)也是如此，第二项也是如此，依此类推。

于 2013-01-31T23:39:27.783 回答
2

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

演示- 您使用 nth-child(4n) 的原始代码

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

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

演示- 在第四张图片之后插入测试 div 使用eq(3)

根据您的评论，甚至eq()似乎不起作用：

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

一般来说，尝试将您的代码包装到一个文档就绪函数中，以确保代码仅在 DOM 就绪后执行，类似于：

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

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

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

为了总体完整性，我认为添加此部分可能对遇到此问题的任何未来用户有用，这些用户可能在使用nth-child().

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

nth-child(x) - 不使用n

例如，如果您有 2 个，每个都有ul几个li，那么$('ul li:nth-child(2)')将选择两个 uls 中的第二个元素。这将与$('li:eq(1)', 'ul').

DEMOul -使用$('ul li:nth-child(2)')
DEMO选择每个元素中的第二个元素- 与上面使用相同的结果$('li:eq(1)', 'ul')

nth-child(xn) - 使用n

$('ul li:nth-child(2n)')另一方面，使用将在两个s中每秒匹配一次。那是因为它像计数器一样使用。liuln

演示- 选择每个ul使用$('ul li:nth-child(2n)')

于 2013-01-31T23:40:17.573 回答