Thêm một cái gì đó sau khi các yếu tố "n" sử dụng jQuery

Question

Đối với một đánh dấu như

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

làm thế nào để thêm một số đánh dấu sau DIV thứ hai ví dụ?

Cảm ơn,
Titel

Answer 1

Thử CSS selector :nth-child():

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

Xem thêm các ví dụ trên jQuery page of the :nth-child() selector.

Answer 2

$("#holder div:eq(1)") sẽ chọn div con thứ hai của số #holder div. (:eq() selector info). Sau đó, sử dụng chức năng .after() để thêm nội dung.

Answer 3

Sử dụng insertAfter (selector)

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

Answer 4

sử dụng :eq(index) hoặc :nth-child(index/even/odd/equation) chọn kết hợp với append(content) hoặc after(content) chức năng.

ví dụ, giả sử mã này:

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

sử dụng thêm như

$("#holder>div:eq(1)").append("<div>inserted div</div>");

này hoặc

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

này sẽ cung cấp cho bạn

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

khi sử dụng sau như

$("#holder>div:eq(1)").after("<div>inserted div</div>");

này hoặc

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

này sẽ cung cấp cho bạn

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

sử dụng: thứ n-con có thể hữu ích vì nó cho phép bạn đặt nội dung theo số lượng n thành phần. cũng, chỉ số của: nth-đứa trẻ bắt đầu tại 1 trong khi chỉ số của: eq bắt đầu từ 0

ví dụ, sử dụng

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

sẽ cung cấp cho bạn

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

sử dụng này

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

Answer 6

Thử như thế này:

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

Nó sẽ chèn <div>insert here</div> sau mỗi hàng 2:

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