jQuery选择后代，包括父母

Question

考虑以下 HTML：

<div class="foo" id="obj">
   I should be changed red
   <div class="bar" style="color:black;">
      I should not be changed red.
      <div class="foo">I should be changed red.</div>
   </div>
</div>

给定一个 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");

有没有更优雅的解决方案？

Answer 1

如果我理解正确的话：

$(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 仍然需要它

Answer 2

jQuery 1.8 引入了.addBack()，它接受一个选择器，支持 .andSelf()。因此 tvanfosson 的代码变得更加高效

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

如果你没有那个，我认为

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

即使不是很漂亮，也会很有效。

Answer 3

Andrew's 答案非常有用，也是所有答案中最有效的（从 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/

完全感谢 Andrew 建议 addBack() 作为最佳选择（截至目前）。相应地支持他并建议每个人都这样做。

Answer 4

除非有更好的解决方案，否则我创建了一个新函数并使用它来代替 $:

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

Answer 5

如果我没记错的话，你能不能不做以下事情？

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

找到预期的对象/元素应用 CSS，然后使用所述选择器找到所述对象/元素内的所有对象/元素，然后也将 CSS 应用到 is？

Answer 6

选择所有子元素的更短的方法，包括父元素：

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

等同于：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <span>Child</span>
  <span>Another child</span>
</div>

当然，您可以将通用选择器更改为所需的元素。

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

或

$('#parent').find('.foo').addBack();

Answer 7

这不是你想要的吗（除非我误解了......）

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

Answer 8

 $('div.foo, div.foo > *').css('color','red');

主要思想是你可以用逗号分隔不同的规则来匹配。就像在 css 中一样。据我所知，here 的所有内容都由 jquery 支持，并且可以通过逗号分隔“或”。