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

仍然是jQuery早于1.8
所需的

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/

完全赞同安德鲁建议将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应用到？

Answer 6

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

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

与以下内容相同：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

或

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

Answer 7

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

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

Answer 8

这不符合你的要求（除非我误解了......）

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

jQuery选择后代，包括父级

8 个答案:

分机代码：

像这样使用：

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