我有一种情况,我的所有选择器都具有相同的祖先元素
$('#foo .bar')...
$('#foo .some_class')...
$('#foo .some_other_class')...
我想知道是否有办法告诉 jQuery 始终假定选择器将从#foo
? 所以像
$.ancestorWillAlwaysBe('#foo');
$('.bar')...
$('.some_class')...
$('.some_other_class')...
我有一种情况,我的所有选择器都具有相同的祖先元素
$('#foo .bar')...
$('#foo .some_class')...
$('#foo .some_other_class')...
我想知道是否有办法告诉 jQuery 始终假定选择器将从#foo
? 所以像
$.ancestorWillAlwaysBe('#foo');
$('.bar')...
$('.some_class')...
$('.some_other_class')...
$ancestor = $("#foo");
$$ = function(arg) {
return $(arg, $ancestor);
}
$$('.bar').html("descendant of foo");
就我个人而言,我会使用类似的东西$ancestor.find('.bar')
......出于代码清晰的原因。
看起来你懒得输入所有这些#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/
没有简单的方法可以完全按照您的要求进行操作,但是您可以找到它:
var $foo = $('#foo');
进而:
var others = $foo.find('.bar');
请记住,在可能的情况下,最好在选择器的最右侧使用标签名称(尽管现在现代浏览器中的选择器解释如此之快,以至于优化通常不值得麻烦)。因此:
var others = $foo.find('span.bar');
当然有时这是不可取的,例如,如果你真的不能轻易地缩小所涉及的元素类型。
编辑——给缓存的 jQuery 结果一个以“$”开头的名字的约定就是:约定。这没有必要,我同情那些觉得它令人反感的人:-)
我有点懒,可能只会创建一个函数:
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');
我想你正在寻找
Child Selector (“parent > child”)
选择由“父”指定的元素的“子”指定的所有直接子元素
或者
:first-child Selector
它选择作为其父元素的第一个子元素的所有元素。