jquery seleziona il primo figlio con classe di un genitore con classe

Question

Come posso selezionare solo il primo figlio di una particolare classe di un genitore con una particolare classe ai fini di clone()?

<div class="sector_order"> 

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

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

</div> 

Sto provando in questo modo:

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

e ottenere entrambi i div interni con la classe line_item_wrapper, ma ottengo un oggetto vuoto quando provo con questa aggiunta:

children('.line_item_wrapper :first') 

Grazie!

Answer 1

I vostri problemi è che il selettore i s errato, in alcuni modi:

parents() restituisce uno, due o più elementi che corrispondono al selettore passato al metodo; per limitarti all'elemento con la prima corrispondenza utilizzare closest() (che restituisce uno o nessun elemento che corrisponde al selettore passato).

Il vostro primo utilizzo del metodo children() restituisce entrambi gli elementi, dal momento che entrambi corrispondere il selettore in dotazione e hanno la classe di line_item_wrapper; è necessario indicare esplicitamente quale dei due desideri, è possibile utilizzare il selettore :first (o il metodo first()) o il selettore :first-child.

La seconda chiamata al metodo children() trovano i figli del primo elemento di pari passo con il selettore, che non si sembrano volere.

In ogni caso, se è necessario utilizzare il genitore (a partire dallo stesso $(this) elemento):

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

Oppure:

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

Oppure:

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

Oppure, francamente, un approccio più semplice (ma questo non fa uso del controllo del nome della classe genitore):

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

Oppure:

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

Riferimenti:

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

Answer 2

Prova questa:

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

questo modo si ottiene il primo discendente diretto del sector_order con la classe line_item_wrapper.

Example fiddle

Answer 3

si sta passando un selettore non valido per children(). Invece di

.children('.line_item_wrapper :first') 

provare

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

Answer 4

Utilizzare :first-child

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

O .first()

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