使用 jQuery 在“n”元素之后添加一些内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1791943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add something after the "n" element using jQuery
提问by titel
For a markup like
对于像这样的标记
<div id="holder">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>
how do add some markup after the second DIV for instance?
例如，如何在第二个 DIV 之后添加一些标记？
Thanks,
titel
谢谢，
标题
回答by Gumbo
Try the CSS selector :nth-child():
$("#holder > div:nth-child(2)").after("<div>foobar</div>");
See also the example on the jQuery page of the :nth-child()selector.
另请参阅选择器的jQuery 页面:nth-child()上的示例。
回答by alexanderpas
use the :eq(index)or :nth-child(index/even/odd/equation)selector in combination with the append(content)or after(content)function.
将:eq(index)或:nth-child(index/even/odd/equation)选择器与append(content)或after(content)函数结合使用。
for example, assuming this code:
例如，假设这个代码：
<div id="holder">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>$("#holder>div:eq(1)").append("<div>inserted div</div>");$("#holder>div:nth-child(2)").append("<div>inserted div</div>");
<div id="holder">
<div>div 1</div>
<div>div 2<div>inserted div</div></div>
<div>div 3</div>
<div>div 4</div>
</div>$("#holder>div:eq(1)").after("<div>inserted div</div>");$("#holder>div:nth-child(2)").after("<div>inserted div</div>");
<div id="holder">
<div>div 1</div>
<div>div 2</div>
<div>inserted div</div>
<div>div 3</div>
<div>div 4</div>
</div>using :nth-child can be useful as it enables you to set content every n amount of elements. also, the index of :nth-child starts at 1 while the index of :eq starts at 0
使用 :nth-child 很有用，因为它使您可以每 n 个元素设置内容。此外，:nth-child 的索引从 1 开始，而 :eq 的索引从 0 开始
for example, using
例如，使用
$("#holder>div:nth-child(2n)").after("<div>inserted div</div>");
<div id="holder">
<div>div 1</div>
<div>div 2</div>
<div>inserted div</div>
<div>div 3</div>
<div>div 4</div>
<div>inserted div</div>
</div>回答by keithjgrant
$("#holder div:eq(1)")will select the second child div of the #holderdiv. (:eq() selector info). Then use the .after()function to append content.
$("#holder div:eq(1)")将选择 div 的第二个子#holderdiv。（:eq() 选择器信息）。然后使用该.after()函数追加内容。
回答by Aseem Gautam
回答by Raman Ghantiyala
use this
用这个
$("ul li:nth-child(4n)").add('ul li:last').after("<div style='clear:both;'> </div>");
回答by Bhaskara Arani
Try it like this:
像这样尝试：
$("#holder > div:nth-child(2n)").after("<div>insert here</div>");
It will insert the <div>insert here</div>after every 2nd row:
它将<div>insert here</div>在每第二行之后插入：
$("#holder > div:nth-child(2)").after("<div>insert here</div>");
