使用jQuery在"n"元素后面添加一些东西

Question

对于像这样的标记

<div id="holder">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div> 

例如,如何在第二个DIV之后添加一些标记？

谢谢,
标题

Answer 1

尝试CSS选择器:nth-child():

$("#holder > div:nth-child(2)").after("<div>foobar</div>");

另请参阅选择器的jQuery页面:nth-child()上的示例.

Answer 2

使用:eq(index)或:nth-​​child(索引/偶数/奇数/方程)选择器结合append(内容)或after(content)函数.

例如,假设此代码:

<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>

使用:nth-​​child非常有用,因为它可以让你每n个元素都设置内容.此外,索引:nth-​​child从1开始,而索引:eq从0开始

例如,使用

$("#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>