隐藏除一个div及其子元素之外的所有元素

如何使用jquery隐藏除一个div及其子元素之外的所有元素?

忽略这一点,似乎没有达到预期的效果。

也许以下?

 $('body').children().hide(); $('#mydiv').children().andSelf().show(); 

更新

问题是,儿童DIV的可见状态通常依赖于它的父母是可见的。 因此,您需要将整棵树放到您希望保持可见的DIV。

你需要隐藏除树之外的所有东西,诀窍是识别不属于DIV祖先的DOM结构的所有子项,以及那些所有兄弟姐妹。

最后!

管理写一个解决方案。 首先尝试了一种递归方法,但是在复杂的页面上,它死于“过多的递归”,所以编写了一个基于列表的版本,工作得很好。 它采用单functionjQuery插件的forms,因为它似乎是最有用的方法。

 (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所有元素(默认为 ),以排除对象及其祖先。

这将实现问题的结果:

 $('#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()我会很高兴听到它!

要定位嵌套元素并确保它是唯一显示的元素,您需要隐藏其兄弟姐妹以及其所有祖先的兄弟姐妹,直到

示例: 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(); 

这将执行$(".mydivclass").not(this).hide();

mydivclass是给所有需要隐藏的div的类

更新:

 $(".mydivclass").children().hide(); 

将隐藏.mydivclass所有子元素

简单的解决方案:隐藏所有然后显示一个(在这种情况下是第二个div及其子项)。

 $('.create-account').children().hide(); $('.create-account>div:nth-of-type(2)').show();