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 selector :nth-child()：

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

另请参阅jQuery page of the :nth-child() selector上的示例。

Answer 2

将:eq(index)或:nth-child(index/even/odd/equation)选择器与append(content)或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>

Answer 3

$("#holder div:eq(1)")将选择#holder div的第二个子div。（:eq() selector info）。然后使用.after()函数添加内容。

Answer 4

使用insertAfter（选择器）

http://docs.jquery.com/Manipulation/insertAfter

Answer 5

使用此

 $("ul li:nth-child(4n)").add('ul li:last').after("<div style='clear:both;'>&nbsp;</div>");

Answer 6

试试这样：

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

它会在每第二行之后插入<div>insert here</div>：

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

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

6 个答案: