How do I select the first div in these divs (the one with id=div1
) using first child selectors?
<div class="alldivs">
<div class="onediv" id="div1">
</div>
<div class="onediv" id="div2">
</div>
<div class="onediv" id="div3">
</div>
</div>
This question is related to
javascript
jquery
children
$('div.alldivs :first-child');
Or you can just refer to the id directly:
$('#div1');
As suggested, you might be better of using the child selector:
$('div.alldivs > div:first-child')
If you dont have to use first-child
, you could use :first
as also suggested, or $('div.alldivs').children(0)
.
Hi we can use default method "first" in jQuery
Here some examples:
When you want to add class for first div
$('.alldivs div').first().addClass('active');
When you want to change the remove the "onediv" class and add only to first child
$('.alldivs div').removeClass('onediv').first().addClass('onediv');
As @Roko mentioned you can do this in multiple ways.
1.Using the jQuery first-child selector - SnoopCode
$(document).ready(function(){
$(".alldivs onediv:first-child").css("background-color","yellow");
}
Using jQuery eq Selector - SnoopCode
$( "body" ).find( "onediv" ).eq(1).addClass( "red" );
Using jQuery Id Selector - SnoopCode
$(document).ready(function(){
$("#div1").css("background-color: red;");
});
Use the :first-child
selector.
In your example...
$('div.alldivs div:first-child')
This will also match any first child descendents that meet the selection criteria.
While
:first
matches only a single element, the:first-child
selector can match more than one: one for each parent. This is equivalent to:nth-child(1)
.
For the first matched only, use the :first
selector.
Alternatively, Felix Kling suggested using the direct descendent selector to get only direct children...
$('div.alldivs > div:first-child')
Source: Stackoverflow.com