jQuery选择后代,包括父级

请考虑以下HTML:

I should be changed red
I should not be changed red.
I should be changed red.

给定一个DOM元素obj和一个表达式,我该如何选择任何子元素和obj ? 我正在寻找类似于“选择后代”的东西,但如果它与表达式匹配,还包括父级。

 var obj = $("#obj")[0]; //wrong, may include siblings of 'obj' $(".foo", $(obj).parent()).css("color", "red"); //wrong -- excludes 'obj' $(".foo", obj).css("color", "red"); //correct way, but it's annoying var matches = $(".foo", obj); if ($(obj).is(".foo")) matches = matches.add(obj); matches.css("color", "red"); 

有更优雅的解决方案吗?

如果我理解正确的话:

 $(currentDiv).contents().addBack('.foo').css('color','red'); 

为清楚起见,我将“div”重命名为“currentDiv”。 这将选择当前元素及其包含的所有元素,然后过滤掉没有类foo的元素,并将样式应用于余数,即具有类foo的样式。

编辑略有优化

 $(currentDiv).find('.foo').addBack('.foo').css('color','red'); 

编辑

此答案已更新,以包含更新的jQuery方法。 它原来是

 $(currentDiv).find('.foo').andSelf().filter('.foo').css('color','red'); 

这仍然是早于1.8的jQuery所必需的

jQuery 1.8引入了.addBack() ,它接受了一个选择器,支持.andSelf()。所以tvanfosson的代码变得更有效率

 $(currentDiv).find(".foo").addBack(".foo").css("color", "red"); 

如果你没有那个,我想是的

 $(currentDiv).find(".foo").add(currentDiv.filter(".foo")).css("color", "red"); 

即使不是非常漂亮,也会很有效率。

安德鲁的答案是非常有用的,也是所有答案中最有效的(从jQuery 1.8开始),所以我按照Sam的建议做了,并把它变成了一个简单的jQuery扩展方法供大家使用:

扩展代码:

 jQuery.fn.findAndSelf = function (selector){ return this.find(selector).addBack(selector); }; 

像这样使用:

 $(function(){ $('#obj').findAndSelf('.foo').css('color', 'red'); }); 

JSFiddle: http : //jsfiddle.net/BfEwK/

完全归功于安德鲁建议将addBack()作为最佳选择(截至此日期)。 相应地投票给他,并建议每个人都这样做。

除非有更好的解决方案,否则我创建了一个新function并使用它而不是$:

 var _$ = function(expr, parent){ return $(parent).is(expr) ? $(expr, parent).add(parent) : $(expr, parent); } 

如果我没有记错,你能不能做到以下几点吗?

 $("#obj").css("color", "red").find(".foo").css("color", "red"); 

找到想要的对象/元素应用CSS,然后使用所述选择器查找所述对象/元素中的所有对象/元素,然后应用CSS也是如此?

选择所有后代元素的简短方法,包括父元素:

 $('*', '#parent').addBack(); 

这与:

 $('#parent').find('*').addBack(); 
 $('*', '#parent').addBack().css('border', '1px solid #f00'); 
  
Child Another child

这不是你想要的(除非我误解了……)

 $(document).ready(function(){ $("div.foo").css("color", "red"); }); 
  $('div.foo, div.foo > *').css('color','red'); 

主要思想是您可以将不同的规则分开以匹配逗号。 就像在CSS中一样。 据我所知, 这里的所有内容都由jquery支持,并且可以通过逗号分隔来“OR”。