当前位置:  开发笔记 > 前端 > 正文

jQuery选择后代,包括父级

如何解决《jQuery选择后代,包括父级》经验,为你挑选了2个好方法。

请考虑以下HTML:

I should be changed red
I should not be changed red.
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");

有更优雅的解决方案吗?



1> tvanfosson..:

如果我理解正确的话:

$(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所必需的



2> Andrew..:

jQuery 1.8引入了.addBack(),它接受了一个选择器,支持.andSelf().所以tvanfosson的代码变得更有效率

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

如果你没有那个,我想是的

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

即使不是非常漂亮,也会很有效率.

推荐阅读
coco2冰冰
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有