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

Answer 1

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