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

我改名为清楚起见，“分区”到“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

1.8的jQuery引入 .addBack（）时，这需要一个选择器，有利于.andSelf（的）。因此，tvanfosson的代码变得更加有效，因为

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

如果你没有这个，我觉得

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

将是非常有效的，如果不是很漂亮。

Answer 3

安德鲁的答案是非常有用和最有效的所有问题的答案（从jQuery的1.8起），所以我做了如萨姆的建议，把它变成一个微不足道的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()是最佳选择（如在此日期）。已经相应upvoted他，并建议大家这样做。的

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

$('*', '#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>