jQuery选择后代，包括父级 [英] jQuery select descendants, including the parent

问题描述

考虑以下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?我正在寻找与选择后代"相似的东西，但如果它与表达式匹配，则还包括父元素.

Given a DOM element obj and an expression, how do I go about selecting any children and possibly obj? I'm looking for something similar to "select descendants" but also including the parent, if it matches the expression.

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");

是否有更优雅的解决方案?

Is there a more elegant solution to this?

推荐答案

如果我对您的理解正确:

If I understand you correctly:

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

为了清楚起见，我将"div"重命名为"currentDiv".这样会选择当前元素及其包含的所有元素，然后过滤掉不具有类foo的元素，并将样式应用于其余元素，即具有类foo的元素.

I renamed the "div" to "currentDiv" for clarity. This selects the current element and all of the elements it contains, then filters out the ones that do not have class foo and applies the style to the remainder, i.e., the ones that do have class foo.

编辑略微优化

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

编辑

此答案已更新，以合并较新的jQuery方法.原来是

This answer has been updated to incorporate newer jQuery methods. It was originally

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

1.8之前的jQuery仍然需要

which is still required for jQuery older than 1.8

这篇关于jQuery选择后代，包括父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！