jquery - 如何在 jquery 中的第一个子 div 之后附加元素？

Question

假设我有以下 div：

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

我怎样才能在 jquery 或 javascript 中使我可以在“mydiv”的第一个孩子之后附加一个元素。或者是否有一些选择器允许我在第一个孩子之后选择和追加？

<div>
 <div>1</div>
 <div>Place to Insert Subsequent div</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

Answer 1

您可以使用:first-childand执行此操作after：

$("#mydiv div:first-child").after(newDiv);

演示

Answer 2

我更喜欢使用eq()而不是first-child因为它更灵活，如果我想将其更改为在第二或第三个 div 之后，我可以将函数中的0值更改为or 。eq(0)eq(1)eq(2)

 $("#mydiv div:eq(0)").after('<div>Place to Insert Subsequent div</div>')

http://jsfiddle.net/KjY7H/

Answer 3

为了保持可读性，您可以将要附加的 div 存储在变量中：

var subsequentDiv = $('<div>Place to Insert Subsequent div</div>');  

然后使用您的变量使用您喜欢的 jQuery 方法，在我的示例中，我使用“insertAfter”：

subsequentDiv.insertAfter('#mydiv div:eq(0)'); // selects children by its index, the first div is equal to 0  
subsequentDiv.insertAfter('#mydiv div:lt(1)'); // selects children that its index is lower than 1 (it means the second div)

实现相同结果的另一种方法是使用“包含过滤器”读取 div 的内容：

subsequentDiv.insertAfter('#mydiv div:contains("1")');

http://jsfiddle.net/cadence96/tyBnX/1/