3

我有一种情况,我的所有选择器都具有相同的祖先元素

$('#foo .bar')...
$('#foo .some_class')...
$('#foo .some_other_class')...

我想知道是否有办法告诉 jQuery 始终假定选择器将从#foo? 所以像

$.ancestorWillAlwaysBe('#foo');
$('.bar')...
$('.some_class')...
$('.some_other_class')...
4

5 回答 5

4
$ancestor = $("#foo");
$$ = function(arg) {
    return $(arg, $ancestor);
}

$$('.bar').html("descendant of foo");

就我个人而言,我会使用类似的东西$ancestor.find('.bar')......出于代码清晰的原因。

于 2012-06-23T18:52:13.340 回答
4

看起来你懒得输入所有这些#foo。这是一种更简单的方法:

var e = $("#foo");  //short enough
$('.bar', e);
$('.some_class', e);
$('.some_other_class', e);

或者如果你真的那么懒惰,你可以这样做:

$ = function(que, anc){
    if($.ancestor){
        return jQuery(que, $.ancestor);
    }else{
        return jQuery(que, anc);
    }
}

$.ancestor = "#foo";  //Ancestor will now always be #foo
$('.bar')...
$('.some_class')...
$('.some_other_class')...
$.ancestor = undefined;  //Clear

演示:http: //jsfiddle.net/DerekL/agnHy/

于 2012-06-23T18:59:45.167 回答
3

没有简单的方法可以完全按照您的要求进行操作,但是您可以找到它:

var $foo = $('#foo');

进而:

var others = $foo.find('.bar');

请记住,在可能的情况下,最好在选择器的最右侧使用标签名称(尽管现在现代浏览器中的选择器解释如此之快,以至于优化通常不值得麻烦)。因此:

var others = $foo.find('span.bar');

当然有时这是不可取的,例如,如果你真的不能轻易地缩小所涉及的元素类型。

编辑——给缓存的 jQuery 结果一个以“$”开头的名字的约定就是:约定。这没有必要,我同情那些觉得它令人反感的人:-)

于 2012-06-23T18:31:56.203 回答
3

我有点懒,可能只会创建一个函数:

function a(elem) {
    return $('#foo').find(elem);
}

并像这样使用它:

a('.bar').css('color', 'red');

小提琴

或者只是创建一个表达式来清除 #foo 之外的任何内容,因为这可能是您所追求的,否则只针对该类就可以了

$.extend($.expr[":"], {  
    foo: function(elem){  
         return $(elem).closest('#foo').length;  
    }  
}); 

并做:

$('.bar:foo').css('color', 'red');

小提琴

于 2012-06-23T19:25:04.733 回答
0

我想你正在寻找

Child Selector (“parent > child”)

选择由“父”指定的元素的“子”指定的所有直接子元素

或者

:first-child Selector

它选择作为其父元素的第一个子元素的所有元素。

于 2012-06-23T18:42:32.173 回答