jquery chọn đứa con đầu tiên với lớp học của một phụ huynh với lớp

Question

Làm thế nào tôi có thể chọn chỉ đứa con đầu tiên của một lớp học cụ thể của một phụ huynh với một lớp học cụ thể cho các mục đích của clone()?

<div class="sector_order"> 

    <div class="line_item_wrapper"> 
    SELECT THIS DIV 
    </div> 

    <div class="line_item_wrapper"> 
    NOT THIS DIV 
    </div> 

</div> 

tôi đang cố gắng như thế này:

var form1 = $(this) 
    .parents('.sector_order') 
    .children('.line_item_wrapper') 
    .children().clone(true) 

và nhận được cả hai divs bên trong với lớp line_item_wrapper, nhưng tôi nhận được một đối tượng rỗng khi tôi cố gắng với bổ sung này:

children('.line_item_wrapper :first') 

Cảm ơn!

Answer 1

vấn đề của bạn là chọn của bạn tôi sai, theo một vài cách:

parents() trả về một, hai hoặc nhiều phần tử khớp với công cụ chọn được chuyển cho phương pháp; để giới hạn bản thân đối với phần tử được so khớp đầu tiên, hãy sử dụng closest() (trả về một hoặc không có phần tử nào khớp với bộ chọn được chuyển vào).

Cách sử dụng đầu tiên của phương pháp children() trả về cả hai phần tử, vì chúng cả hai khớp với bộ chọn được cung cấp và có lớp là line_item_wrapper; bạn cần nêu rõ hai loại nào bạn muốn, bạn có thể sử dụng bộ chọn :first (hoặc phương pháp first()) hoặc bộ chọn :first-child.

Cuộc gọi thứ hai đến phương thức children() tìm thấy con của yếu tố đầu tiên được so khớp bằng công cụ chọn, mà bạn không dường như muốn.

Dù sao, nếu bạn phải sử dụng phụ huynh (bắt đầu từ cùng một nguyên tố $(this)):

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper:first').clone(true); 

Hoặc:

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper').first().clone(true); 

Hoặc:

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper:first-child').clone(true); 

Hoặc, thẳng thắn, một cách tiếp cận đơn giản hơn (nhưng điều này không phân phối với kiểm tra tên lớp cha mẹ):

var form1 = $(this).prevAll('.line_item_wrapper:last'); 

Hoặc:

var form1 = $(this).siblings('.line_item_wrapper').eq(0); 

Tài liệu tham khảo:

• closest().
• eq().
• find().
• :first.
• :first-child.
• first().
• :last.
• parents().
• prevAll().
• siblings().

Answer 2

Hãy thử điều này:

var $firstDiv = $(".sector_order > .line_item_wrapper:eq(0)"); 

Điều này sẽ giúp bạn có được hậu duệ trực tiếp đầu tiên của sector_order với lớp line_item_wrapper.

Example fiddle

Answer 3

Bạn đang đi qua một selector không hợp lệ để children(). Thay vì

.children('.line_item_wrapper :first') 

thử

.children('.line_item_wrapper').first() 

Answer 4

Sử dụng :first-child

var form1 = $(this).closest('.sector_order').find(':first-child'); 

HOẶC .first()

var form1 = $(this).closest('.sector_order').find('.line_item_wrapper').first();