Question

如果我有以下html

<div id="example">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

我想使用jQuery追加html

<div>hello</div>

在第三个兄弟div之后。将原始html更改为

<div id="example">
<div></div>
<div></div>
<div></div>
<div>hello</div>
<div></div>
</div>

如何根据类引用

执行此操作

$("#example")

Answer 1

您可以结合使用.eq()和.after()：

$('#example div').eq(2).after('<div>hello</div>');

Fiddle for example.

或者如果你根本不能改变第一个选择器：

$('#example').find('div').eq(2).after('<div>hello</div>');

Fiddle

Answer 2

另一种方法是：

$($("#example div")[2]).after('<div>Hello</div>');

我们使用数字2而不是3，因为索引为0或3-1;我们重新调用jQuery，因为第一个调用返回一个普通的javascript元素。

$("#example div")[2] // returns 3rd div under element with id 'example' as a js object
$( $("#example")[2] ) // returns 3rd div under element with id 'example' as a jQ object

使用jQuery在第n个兄弟元素之后插入

2 个答案: