嵌套的 jQuery 选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9753930/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nested jQuery Selectors
提问by Asher
Is there anyway to have nested jQuery selectors.
无论如何都有嵌套的jQuery选择器。
For example:
例如：
if the page also has an ID = "LeadEditForm_Title"someplace on it then do the following...
如果页面上也有某个ID = "LeadEditForm_Title"地方，则执行以下操作...
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(".LeadEditForm_Title")然后做上面的？？？基本上是一个嵌套的 jQuery 调用......我见过他们有的例子：
jQuery(function(){ // my code goes here });
But I want it to depend on the ID ".LeadEditForm_Title".
但我希望它依赖于 ID“ .LeadEditForm_Title”。
回答by Jeff B
To nest selectors, you use find:
要嵌套选择器，您可以使用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 andthat class.
一定要在它们之间留一个空格。如果没有空格，您将选择具有该 ID和该类的元素。
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:
最后 4 次jQuery(".mywidget")调用每次都将小部件添加到正文中。您真的只想添加一次并更改每种样式的 css：
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:
这也可以简化为一个 css 调用：
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:
请注意，除此之外，根据 HTML 规范，您的 id 不应有空格。而且，如果你有一个有效的 id，你会像这样选择它：
jQuery("#A0.R0.Main_Phone_Number")
