web-dev-qa-db-fra.com

Comment sélectionner le premier enfant avec jQuery?

Comment sélectionner le premier div de ces divs (celui avec id=div1) en utilisant les premiers sélecteurs enfants? 

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

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

demo jsBin

Extrait de la démo: Autres exemples de sélecteurs et méthodes ciblant le premier LI à côté d'un 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 HTMLelementindex de jQuery el. (array) 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, par exemple:

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

ou vous pouvez (ne le faites pas - c'est une mauvaise conception) envelopper dans un objet jQuery 

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

Ou vous pouvez simplement vous référer à l'identifiant directement:

$('#div1');

Comme suggéré, vous feriez mieux d'utiliser le sélecteur d'enfants:

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

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

18
Frederik Wordenskjold

Utilisez le sélecteur :first-child .

Dans votre exemple ...

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

Cela correspondra également aux premiers descendants d'enfants répondant aux critères de sélection.

Alors que :first ne correspond qu’à un seul élément, le sélecteur :first-child peut en correspondre plus d’un: un pour chaque parent. Ceci est équivalent à :nth-child(1).

Pour le premier correspondant uniquement, utilisez le sélecteur :first .

Sinon, Felix Kling a suggéré d'utiliser le sélecteur direct descendant pour obtenir uniquement des enfants directs ...

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

Comme @Roko l'a mentionné, vous pouvez le faire de plusieurs manières.

1.Utilisation du sélecteur de premier enfant jQuery - SnoopCode

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

  1. Utilisation de sélecteur jQuery eq - SnoopCode

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

  2. Utilisation de jQuery Id Selector - SnoopCode

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

Bonjour, nous pouvons utiliser la méthode par défaut "premier" dans jQuery

Voici quelques exemples:

Quand vous voulez ajouter une classe pour la première div

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

Lorsque vous souhaitez modifier la suppression de la classe "onediv" et ajouter uniquement au premier enfant

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