¿Cómo puedo seleccionar el primer div en estos divs (el uno con id=div1) el uso de los selectores de hijos?

<div class="alldivs">
   <div class="onediv" id="div1">
   </div>
   <div class="onediv" id="div2">
   </div>
   <div class="onediv" id="div3">
   </div>
</div>
InformationsquelleAutor sameold | 2011-05-02

5 Comentarios

  1. 45

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

    demo jsBin

    De la demo: Otros ejemplos de selectores y métodos objetivo de la primera LI unside un UL:

    .eq() Método: $('li').eq(0)

    :eq() selector: $('li:eq(0)')

    .primero() Método $('li').primero()

    :en primer lugar selector: $('li:first')

    :first-child selector: $('li:first-child')

    :lt() selector:$('li:lt(1)')

    :nth-child() selector:$('li:nth-child(1)')

    jQ + JS:

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

    también puede utilizar [i] para obtener el JS HTMLelement índice de jQuery el. (matriz) de la colección, como por ejemplo:

    $('li')[0]

    ahora que usted tiene el JS elemento de representación que usted tiene que usar JS métodos nativos por ejemplo:

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

    o puede (que no es un mal diseño) envuelto de nuevo en un objeto jQuery

    $( $('li')[0] ).addClass('active'); //Don't. Use .eq() instead
  2. 19
    $('div.alldivs :first-child');

    O usted sólo puede hacer referencia a la identificación directa:

    $('#div1');

    Como se ha sugerido, sería mejor utilizar el selector de hijos:

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

    Si no han utilizar first-child, usted podría utilizar :first como también sugerido, o $('div.alldivs').children(0).

    • Usted necesita un espacio en la primera. De lo contrario, no le va a coincidir con la instancia (si existe) de div.alldivs que es un primer hijo.
    • Corregidos. Gracias!
    • Esto se vuelva cada primer hijo de descendientes, no sólo el primer div aquí.
    • $(‘div.alldivs > div:first-child’);
    • Eso no va a funcionar. Que se adaptan a cualquier div que pasa a ser el primer hijo. Usted realmente desea div:first-of-type, pero que al parecer no se admite en jQuery. (Debe haber visto que uno de los anteriores, pero la perdieron en la pregunta.)
    • Lo siento, no sigo.

  3. 9

    Utilizar el :first-child selector.

    En tu ejemplo…

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

    Esto también coincide con cualquier primer hijo descendientes que cumplen con los criterios de selección.

    Mientras :first coincide sólo con un único elemento, el :first-child selector puede coincidir más de uno: uno para cada uno de los padres. Esto es equivalente a :nth-child(1).

    Para la primera igualada sólo, el uso de la :en primer lugar selector.

    Alternativamente, Felix Kling sugirió el uso de la descendiente directo selector para obtener sólo directa a los niños…

    $('div.alldivs > div:first-child')
    • Podría ser mejor usar el selector de hijos aquí >. O tal vez sólo: $('div.alldivs').children().first(); o algo similar.
    • Buena sugerencia, voy a editar 🙂
  4. 0

    Hola que podemos utilizar por defecto el método de «primero» en jQuery

    Aquí algunos ejemplos:

    Cuando desee agregar clase para el primer div

      $('.alldivs div').first().addClass('active');

    Cuando se desea cambiar el quitar el «onediv» de la clase y agregar solamente a su primer hijo

       $('.alldivs div').removeClass('onediv').first().addClass('onediv');

Dejar respuesta

Please enter your comment!
Please enter your name here