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

【问题标题】：Hide all elements except one div and its child element隐藏除一个 div 及其子元素之外的所有元素
【发布时间】：2011-05-15 17:39:07
【问题描述】：

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

【问题讨论】：

这取决于目标 <div> 在 HTML 标记中的位置。
或许，更详细一点的问题会有助于回答

标签： jquery hide

【解决方案1】：

忽略这一点，似乎没有预期的效果。

~~也许是以下？~~

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

更新

问题是，子 DIV 的可见状态通常依赖于其父 DIV 的可见性。因此，您需要将一整棵树向下延伸到您希望保持可见的 DIV。

您需要隐藏除该树之外的所有内容，诀窍是识别不属于 DIV 祖先的 DOM 结构的所有子结构，以及属于 DIV 祖先的所有兄弟。

终于！

设法编写解决方案。起初尝试了一种递归方法，但在复杂的页面上它因“递归过多”而死，因此编写了一个基于列表的版本，效果很好。它采用单功能 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() 之外的另一个对象，我会很高兴听到它！

【讨论】：

有吗？嗯，一定是针对那种情况的。一般来说，它不是万无一失的。
可能是因为#mydiv 是body 的直接子代。如果是这种情况，您可以像 $('body > :not(#mydiv)').hide(); 这样缩短它。我添加了一个适用于嵌套元素的答案。
@patrick 我已经在我的后面添加了你的答案，这样任何阅读它的人都不会跳下来尝试它！对人们来说可能会很好地看到说明所涉及方法的代码。

【解决方案2】：

这样$(".mydivclass").not(this).hide();就可以了

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

更新：

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

将隐藏.mydivclass中的所有子元素

【讨论】：

如果mydivclass 没有提到只有一个maindiv 有一些元素和其他div.. 那么如何隐藏。
@Rafee，我有点困惑……你能解释一下吗
想要隐藏maindiv 中的所有子元素，而这个maindiv 有一些text 和其他输入字段以及其他一些div。
@Mattis 显然这是行不通的：如果你隐藏 .mydivclass 的父级，那么 .mydivclass 也将被隐藏......

【解决方案3】：

要定位嵌套元素并确保它是唯一显示的元素，您需要隐藏其兄弟姐妹以及其所有祖先的兄弟姐妹，直到 <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();

【讨论】：

LOL，你的代码生成的输出和我上面的全能块一样，不知道.parentsUntil()。
@Orbling - 有时一种方法可以改变世界。 :o) 我只是通过使用.andSelf() 简化了我的。
@user113716 不是 parentsUntil('body') 和 parents() 一样吗？
+1 如果您使用多个选择器，则需要进一步修改，否则效果很好。

【解决方案4】：

简单的解决方案：隐藏所有然后显示一个（在本例中是第二个 div 及其子级）。

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

【讨论】：