23

考虑以下 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");

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

4

8 回答 8

28

如果我理解正确：

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

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

编辑 轻微优化

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

编辑

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

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

1.8 之前的 jQuery 仍然需要它

于 2008-12-13T04:01:27.257 回答
9

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

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

如果你没有那个，我认为

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

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

于 2013-05-31T23:39:27.200 回答
2

Andrew 的答案非常有用，也是所有答案中最有效的（从 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()的最佳选择（截至目前）。相应地支持他并建议每个人都这样做。

于 2014-06-05T10:56:18.907 回答
1

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

var _$ = function(expr, parent){ 
   return $(parent).is(expr) ? $(expr, parent).add(parent) : $(expr, parent); 
}
于 2008-12-13T03:55:07.173 回答
0

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

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

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

于 2011-08-23T21:18:44.220 回答
0

选择所有后代元素（包括父元素）的更短方法：

$('*', '#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();
于 2015-12-10T19:13:00.287 回答
-1 
 $('div.foo, div.foo > *').css('color','red');

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

于 2008-12-13T03:54:48.720 回答
-1

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

$(document).ready(function(){
    $("div.foo").css("color", "red");
});
于 2008-12-13T04:00:22.920 回答