Comment sélectionner premier enfant avec jQuery?

Comment choisir la première div dans ces divs (celle avec id=div1) en utilisant les premiers sélecteurs enfant?

<div class="alldivs">
   <div class="onediv" id="div1">
   </div>
   <div class="onediv" id="div2">
   </div>
   <div class="onediv" id="div3">
   </div>
</div>
32
demandé sur user2864740 2011-05-02 04:31:50

4 réponses

Essaie avec: $('.onediv').eq(0)

démo jsBin

à Partir de la démo: autres exemples de sélecteurs et méthode ciblage de la première LI unside UL:

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

:eq() sélecteur:  $('li:eq(0)')

.first() Méthode: $('li').first()

:first sélecteur: $('li:first')

:first-child sélecteur: $('li:first-child')

:lt() sélecteur: $('li:lt(1)')

:nth-child() sélecteur:  $('li:nth-child(1)')

jQ + JS:

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

vous pouvez également utiliser [i] pour obtenir le JS HTMLelement index de l'jQuery el. (array) de la collection, comme par exemple:

$('li')[0]

maintenant que vous avez la représentation de l'élément JS vous devez utiliser les méthodes natives js eg:

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

ou vous (ne pas - il mauvaise conception) l'envelopper de nouveau dans un objet jQuery

$( $('li')[0] ).addClass('active'); // Don't. Use .eq() instead
44
répondu Roko C. Buljan 2017-04-05 01:23:40
$('div.alldivs :first-child');

Ou vous pouvez tout simplement se référer à l'id directement:

$('#div1');

Comme l'a suggéré, vous pourriez être mieux d'utiliser le sélecteur d'enfant:

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

Si vous n'avez pas utiliser first-child, vous pouvez utiliser :first comme suggéré aussi, ou $('div.alldivs').children(0).

18
répondu Frederik Wordenskjold 2013-05-15 17:19:39

:first-child sélecteur.

dans votre exemple...

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

cela correspondra aussi aux descendants du premier enfant qui répondent aux critères de sélection.

:first correspond à un seul élément, le :nth-child(1).

Pour la première appariés ,:first sélecteur.

alternativement, Felix Kling a suggéré d'utiliser le sélecteur de descente directe pour n'avoir que des enfants directs...

$('div.alldivs > div:first-child')
9
répondu alex 2017-05-23 12:17:50

comme @Roko l'a mentionné, vous pouvez le faire de plusieurs façons.

1.À l'aide de la jQuery premier sélecteur d'enfant - SnoopCode

   $(document).ready(function(){
    $(".alldivs onediv:first-child").css("background-color","yellow");
        }
  1. en utilisant jQuery Sélecteur eq - SnoopCode

     $( "body" ).find( "onediv" ).eq(1).addClass( "red" );
    
  2. en utilisant jQuery Sélecteur d'Id - SnoopCode

       $(document).ready(function(){
         $("#div1").css("background-color: red;");
       });
    
0
répondu Prabhakar 2015-10-24 08:18:37