jQuery选择后代,包括父级
请考虑以下HTML:
I should be changed red
给定一个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");
有更优雅的解决方案吗?
如果我理解正确的话:
$(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');
这仍然是早于1.8的jQuery所必需的
jQuery 1.8引入了.addBack() ,它接受了一个选择器,支持.andSelf()。所以tvanfosson的代码变得更有效率
$(currentDiv).find(".foo").addBack(".foo").css("color", "red");
如果你没有那个,我想是的
$(currentDiv).find(".foo").add(currentDiv.filter(".foo")).css("color", "red");
即使不是非常漂亮,也会很有效率。
安德鲁的答案是非常有用的,也是所有答案中最有效的(从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()
作为最佳选择(截至此日期)。 相应地投票给他,并建议每个人都这样做。
除非有更好的解决方案,否则我创建了一个新function并使用它而不是$:
var _$ = function(expr, parent){ return $(parent).is(expr) ? $(expr, parent).add(parent) : $(expr, parent); }
如果我没有记错,你能不能做到以下几点吗?
$("#obj").css("color", "red").find(".foo").css("color", "red");
找到想要的对象/元素应用CSS,然后使用所述选择器查找所述对象/元素中的所有对象/元素,然后应用CSS也是如此?
选择所有后代元素的简短方法,包括父元素:
$('*', '#parent').addBack();
这与:
$('#parent').find('*').addBack();
$('*', '#parent').addBack().css('border', '1px solid #f00');
Child Another child
这不是你想要的(除非我误解了……)
$(document).ready(function(){ $("div.foo").css("color", "red"); });
$('div.foo, div.foo > *').css('color','red');
主要思想是您可以将不同的规则分开以匹配逗号。 就像在CSS中一样。 据我所知, 这里的所有内容都由jquery支持,并且可以通过逗号分隔来“OR”。