CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JeVic
JeVic

Reputation: 681

Select Class selector child div Jquery

I would like to know how select the element under thumbSlider using Jquery 

<div class="thumbSlider"> 

                <div class="graythumb showthumb">
                <div class="bluethumb">
</div>

I am familiar how to select a class doing 

$(function () {
    if ($('.graythumb').hasClass('showthumb')) {
        alert('has class2');
    }
});

but I need to make sure that I would only be selecting element under thumbSlider class

in css it would be like

.thumbSlider .graythumb { display:none;}
.thumbSlider .graythumb .showthumb { display:block;}

Upvotes: 0

Views: 35

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206593

Well, just like in CSS:

$(".thumbSlider .graythumb")      // Child
$(".thumbSlider > .graythumb")    // Immediate child

or using .find()

$(".thumbSlider").find(".graythumb")

When using a library make sure to take some time to go through their API:
https://api.jquery.com/
https://api.jquery.com/category/selectors/

in your case would look like:

if ( $(".thumbSlider .graythumb").hasClass('showthumb')) {
// or
if ( $(".thumbSlider").find(".graythumb").hasClass('showthumb')) {

or if you want to make sure it applies only to the immediate children:

if ( $(".thumbSlider > .graythumb").hasClass('showthumb')) {
// or
if ( $(".thumbSlider").children(".graythumb").hasClass('showthumb')) {
// or
if ( $(".thumbSlider").find("> .graythumb").hasClass('showthumb')) {

Upvotes: 2

Related Questions