javascript - second - seleccionar elementos jquery

¿Cómo seleccionar el primer hijo con jQuery?

Question

¿Cómo selecciono el primer div en estos divs (el que tiene id=div1 ) usando los primeros selectores secundarios?

<div class="alldivs">
   <div class="onediv" id="div1">
   </div>
   <div class="onediv" id="div2">
   </div>
   <div class="onediv" id="div3">
   </div>
</div>

Answer 1

Como @Roko mencionó, puedes hacer esto de múltiples maneras.

1.Uso del selector de primer hijo jQuery - SnoopCode

   $(document).ready(function(){
    $(".alldivs onediv:first-child").css("background-color","yellow");
        }

2. Usando jQuery eq Selector - SnoopCode

    $( "body" ).find( "onediv" ).eq(1).addClass( "red" );

3. Usando jQuery Id Selector - SnoopCode

      $(document).ready(function(){
        $("#div1").css("background-color: red;");
      });

Answer 2

Pruebe con: $(''.onediv'').eq(0)

demo jsBin

De la demostración: otros ejemplos de selectores y métodos dirigidos a la primera LI unside a UL :

Método .eq() : $(''li'').eq(0)
:eq() selector :eq() : $(''li:eq(0)'')
.first() Método: $(''li'').first()
:first selector: $(''li:first'')
:first-child selector de :first-child : $(''li:first-child'')
:lt() selector de :lt() : $(''li:lt(1)'')
:nth-child() selector :nth-child() : $(''li:nth-child(1)'')

jQ + JS:

Array.slice() Método: $(''li'').slice(0,1)

también puede usar [i] para sacar el índice JS HTMLelement del jQuery el. (matriz) colección como por ejemplo:

$(''li'')[0]

ahora que tiene la representación del elemento JS, debe usar métodos nativos JS, por ejemplo:

$(''li'')[0].className = ''active''; // Adds class "active" to the first LI in the DOM

o puede (no lo haga, es un mal diseño) envolverlo en un objeto jQuery

$( $(''li'')[0] ).addClass(''active''); // Don''t. Use .eq() instead

Answer 3

Use el selector :first-child .

En tu ejemplo ...

$(''div.alldivs div:first-child'')

Esto también coincidirá con cualquier primer descendiente hijo que cumpla con los criterios de selección.

Mientras :first coincide solo con un elemento, el selector :first-child puede coincidir con más de uno: uno para cada padre. Esto es equivalente a :nth-child(1) .

Para el primer emparejado solo , use el :first selector.

Alternativamente, Félix Kling sugirió usar el selector descendente directo para obtener solo hijos directos ...

$(''div.alldivs > div:first-child'')

Answer 4

$(''div.alldivs :first-child'');

O simplemente puede consultar la identificación directamente:

$(''#div1'');

Como se sugirió, es mejor utilizar el selector de elementos secundarios:

$(''div.alldivs > div:first-child'')

Si no tiene que usar el first-child , podría usar :first como también se sugirió, o $(''div.alldivs'').children(0) .