jQuery nested DOM selector

Question

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!

T.J. Crowder · Accepted Answer · 2013-03-04 10:22:25Z

7

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.

edited Mar 4, 2013 at 10:22

answered Mar 4, 2013 at 10:05

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

iappwebdev · Accepted Answer · 2013-03-04 10:13:41Z

2

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

edited Mar 4, 2013 at 10:13

answered Mar 4, 2013 at 10:04

iappwebdev

5,9301 gold badge34 silver badges48 bronze badges

4 Comments

Álvaro González Over a year ago

Correct. The original selector doesn't work in jQuery because it doesn't work in CSS.

Anthony Grist Over a year ago

@ÁlvaroG.Vicario The original selector doesn't work because it doesn't match the DOM structure of the page. Is that what you meant? Saying it "doesn't work in CSS" is incorrect because it is a valid selector (just not for any element on their page).

Álvaro González Over a year ago

@AnthonyGrist - Yes, that's what I mean: it doesn't work as the OP expects. jQuery selectors are based on CSS selectors.

iappwebdev Over a year ago

I don't think that this is a 100% correct description. jQuery selectors are baseb on the Sizzle engine (sizzlejs.com) which supports virtually all CSS 3 Selectors: github.com/jquery/sizzle/wiki/Sizzle-Documentation

Dipesh Parmar · Accepted Answer · 2013-03-04 10:05:13Z

1

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.

answered Mar 4, 2013 at 10:05

Dipesh Parmar

27.3k8 gold badges65 silver badges92 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-03-04 10:04:20Z

0

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")

answered Mar 4, 2013 at 10:04

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Kevin Bowersox · Accepted Answer · 2013-03-04 10:05:49Z

0

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.

answered Mar 4, 2013 at 10:05

Kevin Bowersox

94.6k19 gold badges164 silver badges198 bronze badges

Comments

Jai · Accepted Answer · 2013-03-04 10:14:30Z

0

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>

edited Mar 4, 2013 at 10:14

answered Mar 4, 2013 at 10:04

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

jQuery nested DOM selector

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

See:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

See:

Comments

Your Answer

Sign up or log in

Post as a guest

Related