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>
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:
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
$('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)
.
: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')
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");
}
en utilisant jQuery Sélecteur eq - SnoopCode
$( "body" ).find( "onediv" ).eq(1).addClass( "red" );
en utilisant jQuery Sélecteur d'Id - SnoopCode
$(document).ready(function(){ $("#div1").css("background-color: red;"); });