javascript - queryselectorall - seleccionar elementos jquery

jquery selecciona primer hijo con clase de un padre con clase

Question

¿Cómo puedo seleccionar solo el primer hijo de una clase particular de un padre con una clase particular para los propósitos de clone() ?

<div class="sector_order">

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

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

</div>

Estoy tratando así:

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

y obtén los dos divs internos con la clase line_item_wrapper , pero obtengo un objeto vacío cuando intento con esta adición:

children(''.line_item_wrapper :first'')

¡Gracias!

Answer 1

Estás pasando un selector no válido a children() . En lugar de

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

tratar

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

Answer 2

Prueba esto:

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

Esto te dará el primer descendiente directo de sector_order con la clase line_item_wrapper .

Ejemplo de violín

Answer 3

Su problema es que su selector está equivocado, de varias maneras:

parents() devuelve uno, dos o muchos elementos que coinciden con el selector pasado al método; para limitarse al primer elemento coincidente, utilice el elemento closest() (que devuelve uno o ninguno de los elementos que coinciden con el selector pasado).

Su primer uso del método children() devuelve ambos elementos, ya que ambos coinciden con el selector suministrado y tienen la clase de line_item_wrapper ; debe indicar explícitamente cuál de los dos que desea, puede usar el :first selector (o el first() método first() ) o el selector del :first-child .

El segundo método de llamada al método children() encuentra los hijos del primer elemento que coincide con el selector, que parece que no deseas.

De todos modos, si debe usar el elemento primario (a partir del mismo elemento $(this) ):

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

O:

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

O:

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

O, francamente, un enfoque más simple (pero esto prescinde de la verificación de nombre de clase principal):

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

O:

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

Referencias:

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

Answer 4

Uso :first-child

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

.first()

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