use*_*716 13
要定位嵌套元素并确保它是唯一显示的元素,你需要隐藏它的兄弟姐妹,以及它的所有祖先的兄弟姐妹,直到它<body>.
示例: http ://jsfiddle.net/patrick_dw/gSXYa/1/
$('#target').show().parentsUntil('body').andSelf().siblings().hide();
编辑: 我上面添加的解决方案更简洁.
示例: http ://jsfiddle.net/patrick_dw/gSXYa/
var target = $('#target').show();
target = target.add(target.parentsUntil('body')).siblings().hide();
忽略这一点,似乎没有达到预期的效果.
也许以下？
$('body').children().hide();
$('#mydiv').children().andSelf().show();
更新
问题是,儿童DIV的可见状态通常依赖于父母可见.因此,您需要将整棵树放到您希望保持可见的DIV.
你需要隐藏除树之外的所有东西,诀窍是识别不属于DIV祖先的DOM结构的所有子项,以及所有那些兄弟姐妹.
最后!
管理编写解决方案.首先尝试了一种递归方法,但是在复杂的页面上它会因"过多的递归"而死掉,所以编写了一个基于列表的版本,它的工作正常.它采用单功能jQuery插件的形式,因为它似乎是最有用的方法.
(function($) {
$.fn.allBut = function(context) {
var target = this;
var otherList = $();
var processList = $(context || 'body').children();
while (processList.size() > 0) {
var cElem = processList.first();
processList = processList.slice(1);
if (cElem.filter(target).size() != target.size()) {
if (cElem.has(target).size() > 0) {
processList = processList.add(cElem.children());
} else {
otherList = otherList.add(cElem);
}
}
}
return otherList;
}
})(jQuery);
此例程查找排除对象及其祖先的context(默认为<body>)内的所有元素.
这将实现问题的结果:
$('#mydiv').allBut().hide();
另一个用途可能是保留具有某个类的容器中的所有对象,淡出所有其他对象:
$('.keep').allBut('#container').fadeOut();
请记住,任何给定元素的布局和定位都可能在很大程度上取决于周围的元素,因此隐藏这样的东西很可能会改变布局,除非事物绝对定位.无论如何,我可以看到例程的用途.
然而!
另一张海报提出了以下内容,它使用我已经内置于jQuery的例程返回相同的信息,这是我没见过的.
target.add(target.parentsUntil(context)).siblings();
或没有变量
target.parentsUntil(context).andSelf().siblings();
这有点简单,将来必须搜索文档.
PS.如果有人有更好的方法来检查给定的jQuery对象是否等同于另一个,a.filter(b).size() != b.size()我会很高兴听到它!