Nested jQuery selectors

Question

In any case, there are nested jQuery selectors.

For example:

if the page also has ID = "LeadEditForm_Title" somewhere on it, follow these steps ...

 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 to do if if jQuery(".LeadEditForm_Title") and then do the above? basically a nested jQuery call ... I saw examples where they are:

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

But I want it to depend on the identifier .LeadEditForm_Title .

Answer 1

To set the selector, use find :

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

This is the same as for this:

 jQuery('#mySelectorId .mySelectorClass') 

Be sure to put a space between them. Without a space, you select an element with this identifier for this class as well.

I would also like to point out that your code probably does not do what you think:

 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 add a widget to the body every time. You really only want to add it 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 a single 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 should not have spaces, according to the HTML specification. And if you have a valid identifier, you should select it like this:

 jQuery("#A0.R0.Main_Phone_Number") 

Answer 2

If you want to make a jQuery nested call, you can do it like this:

 $(document).ready(function(){ $(document).ready(function(){ // javascript code here... }); });