CODEWITHSUNDEEP
jquerydomselector
Mahdi
Mahdi

Reputation: 9417

jQuery nested DOM selector

Let say I have the following HTML elements:

<div id="id">
    <div class="first">
        <div class="second"></div>
    </div>
</div>

I'm wondering why this doesn't work in jQuery:

$("#id.first.second").click( // do some stuff ...

I usually use something like the following which works fine, but today I just found out that the above example is not working. 

// working example
$("#id .second").click( // do some stuff ...

Update: My question is why it is not working without spaces? Thanks!

Upvotes: 4

Views: 7558

Answers (6)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

The selector #id.first.second means "an element with the id value "id" which also has the classes first and second".

Your second selector #id .second (with the space before .second) means "an element with the id value "id" which has a descendant element with class second". It's a "descendant selector".

So if you want to specify each of the three levels, you'd do this:

$("#id .first .second").click(...

...which means "an element with the id value "id" which has a descendant element with the class first which, in turn, has a descendant element with class second".

Or alternately, you might do:

$("#id > .first > .second").click(...

...which means "an element with the id value "id" which has a direct child element with the class first which, in turn, has a direct child element with class second. It's a child selector (actually two of them).

Or, of course, some combination of them.

Upvotes: 7

Jai
Jai

Reputation: 74738

Put spaces between them:

$("#id .first .second").click( // do some stuff ...

See:

$("#id.first.second").click( // do some stuff ...

what this is looking for an id with some classes, something like:

<div id='id' class='first second'></div>

Upvotes: 0

iappwebdev
iappwebdev

Reputation: 5910

This will work:

$("#id .first .second").click( // do some stuff ...

For your first selector it would be searching for:

<div id="id" class="first second">
</div>

Explanation

Your first selector is looking for an element with an id id having classes first and second.

But you actually want to look for an element with class second beeing a descendant of an element with class first, which is again a descendant of an element with id id

Upvotes: 2

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

Separate the selectors by a space to find descendants.

$("#id .first .second").click(function(){
   alert("Hello");
});

The original selector tried to find an element with and id of id class of first and a class of second.

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

A space between selector means "any descendant of": direct children and children of those children could be selected.

So $('#id .first .second') this means get the DOM inside div with id of id and get descendent DOM with class name of first and its descendent DOM with class name of second.

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use jQuery descendant selector here. You need to give a space between the parent selector and the child.

If you specify the sectors without space it will be considered as a and condition. In your case it will look for an element with id id and has the classes first and second. ex: <div id="id" class="first second"></div>

$("#id.first.second") should be $("#id .first .second")

Upvotes: 0

Related Questions