jQuery - 在指定数量的元素后添加HTML！

Question

我需要知道是否可以计算div中的元素数量，并在3个元素后添加一个HTML对象。

<div id="wrapper">
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
//insert html with jQuery here
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
//insert html with jQuery here
<a href="#">1</a>
<a href="#">1</a>
<a href="#">1</a>
//insert html with jQuery here
</div>

- Adrian Florescu

Answer 1

$('#wrapper a').each(function(i,e){
  if (((i+1) % 3) == 0)
    $(this).after('<p>Hello, world.</p>');
});

利用.each的“i”参数，可以获得元素索引。然后可以使用模运算获取第三个项目并附加。

工作示例：http://www.jsfiddle.net/hd7FP/1/ 此时只显示另一种解决方案。

- Brad Christie

---

@Sshybovycha：在jsfiddle链接上试一下，看看是否有效。（尝试和错误是学习的一种非常有效的方式。;D）- @FlorescuAdrian：不客气。 - Brad Christie

Answer 2

请查看 nth-child-selector。

基本上：

$("#wrapper a:nth-child(3n)").after("<span>I'm new.</span>");

- miku

---

我猜他需要使用.after()而不是append来在那些位置插入HTML。 - Ege Özcan

这很好，谢谢！但它在子元素中添加了<span>而不是在其后。是否有任何方法可以在ahref结束后添加HTML？ - Adrian Florescu

@Florescu：你应该使用after而不是append。 - user113716

更正：只需使用 after 而不是 append。 - miku

.after() 很好用，但它只会添加到第一个匹配项，而不是每隔三个添加一次。 - Adrian Florescu

Answer 3

$('#wrapper a').each(function(index) {
  if ((index+ 1) % 3 == 0)
     $(this).after(content);
});

- Vadim