Nested jQuery Selectors

Question

Is there anyway to have nested jQuery selectors.

For example:

if the page also has an ID = "LeadEditForm_Title" someplace on it then do the following...

jQuery("[id='A0.R0.Main Phone Number']").live('mousedown',function(e) {
    var container = $(this).width();
    var width_offset = -50;
    var top_offset = 25;
    var width = (container + width_offset).toString();
    jQuery(".mywidget").appendTo(document.body).css('width', width + 'px');
    jQuery(".mywidget").appendTo(document.body).css('position', 'absolute');
    jQuery(".mywidget").appendTo(document.body).css('top', ($(this).offset().top+top_offset).toString() + 'px');
    jQuery(".mywidget").appendTo(document.body).css('left', Math.round($(this).offset().left) + 'px');
});

QUESTION:

How do I do an if jQuery(".LeadEditForm_Title") then do the above??? basically a nested jQuery call... I've seen examples where they have :

 jQuery(function(){ // my code goes here });

But I want it to depend on the ID ".LeadEditForm_Title".

Does your ID really have spaces in it? HTML spec says that IDs cannot have spaces. Normally you select IDs with #. I.e. $("#myID"). — Jeff B
– Jeff B, Commented Mar 17, 2012 at 21:37
Why mousedown and not click? also ids aren't supposed to have spaces like that, I doubt it'll validate. You could use data instead... — elclanrs
– elclanrs, Commented Mar 17, 2012 at 21:53
What I'm looking to do is... if(jQuery("someselectorid") then do some thing else... — Asher
– Asher, Commented Mar 18, 2012 at 0:40

Jeff B · Accepted Answer · 2012-03-17 22:10:01Z

34

To nest selectors, you use find:

jQuery('#mySelectorId').find('.mySelectorClass')

This is the same as doing this as well:

jQuery('#mySelectorId .mySelectorClass')

Being sure to put a space between. Without the space you are selecting an element with that ID and that class.

I would also note that your code is probably not doing what you think it is:

jQuery("[id='A0.R0.Main Phone Number']").live('mousedown',function(e) {
    var container = $(this).width();
    var width_offset = -50;
    var top_offset = 25;
    var width = (container + width_offset).toString();
    jQuery(".mywidget").appendTo(document.body).css('width', width + 'px');
    jQuery(".mywidget").appendTo(document.body).css('position', 'absolute');
    jQuery(".mywidget").appendTo(document.body).css('top', ($(this).offset().top+top_offset).toString() + 'px');
    jQuery(".mywidget").appendTo(document.body).css('left', Math.round($(this).offset().left) + 'px');
});

The last 4 jQuery(".mywidget") calls are adding the widget to the body each time. You really only want to add it once and change the css for each style:

jQuery("[id='A0.R0.Main Phone Number']").live('mousedown',function(e) {
    var container = $(this).width();
    var width_offset = -50;
    var top_offset = 25;
    var width = (container + width_offset).toString();
    jQuery(".mywidget").appendTo(document.body).css('width', width + 'px').css('position', 'absolute').css('top', ($(this).offset().top+top_offset).toString() + 'px').css('left', Math.round($(this).offset().left) + 'px');
});

Which can also be reduced to one css call:

jQuery("[id='A0.R0.Main Phone Number']").live('mousedown',function(e) {
    var container = $(this).width();
    var width_offset = -50;
    var top_offset = 25;
    var width = (container + width_offset).toString();
    jQuery(".mywidget").appendTo(document.body).css({
        width: width + 'px',
        position: 'absolute',
        top: ($(this).offset().top+top_offset).toString() + 'px',
        left: Math.round($(this).offset().left) + 'px';
    });
});

Note, outside of this, your id is not supposed to have spaces, according to HTML spec. And, if you have a valid id, you would select it like this:

jQuery("#A0.R0.Main_Phone_Number")

edited Mar 17, 2012 at 22:10

answered Mar 17, 2012 at 21:41

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

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

3 Comments

Asher Over a year ago

If there anyway to do this? if (jQuery("#A0.R0.Main_Phone_Number")) then (do my other jQuery call)...

Jeff B Over a year ago

What do you mean "other call"? What are you trying to accomplish?

Jeff B Over a year ago

It would help if you described what your html is doing and what you actually want to happen.

Collectives™ on Stack Overflow

Nested jQuery Selectors

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related