嵌套的jQuery选择器

Question

反正有没有嵌套的jQuery选择器.

例如:

如果页面上还有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');
});

题:

如果jQuery(".LeadEditForm_Title")那么我怎么办呢？基本上是一个嵌套的jQuery调用...我已经看到他们有的例子:

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

但我希望它依赖于ID" .LeadEditForm_Title".

Answer 1

要嵌套选择器,您可以使用find:

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

这与执行此操作相同:

jQuery('#mySelectorId .mySelectorClass')

一定要在两者之间留一个空格.如果没有空间,您将选择具有该ID 和该类的元素.

我还要注意你的代码可能没有按照你的想法做到:

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');
});

最后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');
});

哪个也可以减少为一个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';
    });
});

注意,除此之外,根据HTML规范,你的id不应该有空格.并且,如果您有一个有效的ID,您可以选择它:

jQuery("#A0.R0.Main_Phone_Number")