jQuery选择后代,包括父级

时间:2008-12-13 03:49:08

标签: jquery jquery-selectors parent descendant

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

对此有更优雅的解决方案吗?

8 个答案:

答案 0 :(得分:28)

如果我理解正确的话:

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

所需的

答案 1 :(得分: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");

非常有效,如果不是很漂亮的话。

答案 2 :(得分:2)

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()作为最佳选择(截至此日期)。相应地投票给他,并建议每个人都这样做。

答案 3 :(得分:1)

除非有更好的解决方案,否则我已经创建了一个新功能并使用它代替$:

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

答案 4 :(得分:0)

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

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

与以下内容相同:

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

&#13;
&#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;
&#13;
&#13;

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

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

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

答案 5 :(得分:0)

如果我没有记错,你能不能做到以下几点吗?

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

找到想要的对象/元素应用CSS,然后使用所述选择器查找所述对象/元素中的所有对象/元素,然后将CSS应用到?

答案 6 :(得分:-1)

这不符合你的要求(除非我误解了......)

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

答案 7 :(得分:-1)

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

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