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

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

忽略这一点，似乎没有达到预期效果

也许是以下几点

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

更新

问题是，子DIV的可见状态通常依赖于它的父级是否可见。所以你需要有一个完整的树，一直到你想要保持可见的DIV

您需要隐藏除该树之外的所有内容，诀窍是识别DOM结构中不在DIV祖先中的所有子级，以及不在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);

此例程查找

上下文

（默认为

）中排除对象及其祖先的所有元素

这将实现问题的结果：

$('#mydiv').allBut().hide();

另一个用途是将容器中的所有对象保留在某个类中，从而淡出所有其他对象：

$('.keep').allBut('#container').fadeOut();

请记住，任何给定元素的布局和定位都可能严重依赖于周围的元素，因此隐藏类似的内容可能会改变布局，除非这些内容是绝对定位的。不管怎样，我都能看出这套程序的用处

然而

另一张海报提出了以下内容，它使用jQuery中内置的例程返回相同的信息，我以前没有见过这个例程

target.add(target.parentsUntil(context)).siblings();

或者没有变量

这是一个稍微简单一点，必须在未来的文件

PS.如果有人有比

a.filter（b）.size（）更好的方法来检查给定的jQuery对象是否与另一个对象等效b、 size（）

我很高兴听到这个消息

这将执行

$（“.mydivclass”）。而不是（This.hide（）

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

更新：

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

将隐藏
中的所有子元素。mydivclass
要以嵌套元素为目标并确保它是唯一显示的元素，您需要隐藏它的同级元素以及它的所有祖先的同级元素，直到

示例：


编辑：我在上面添加的解决方案更加简洁

示例：

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

这将取决于目标
在HTML标记中的位置。也许，更详细一点的问题将有助于回答这个问题？嗯，一定是那种特殊情况。一般来说，这并不是万无一失的。可能是因为
#mydiv
是
body
的直系后代。如果是这样的话，您可以将其缩短为
$（'body>：not（#mydiv））.hide（）。我添加了一个适用于嵌套元素的答案。@patrick我在我的答案之后添加了你的答案，这样任何阅读它的人都不会跳下来尝试它！也许人们很高兴看到代码演示了所涉及的方法。LOL，您的代码生成的输出与上面我万能的代码块相同，不知道
.parentsUntil（）
@Orbling-有时一种方法会带来世界上所有的不同o） 我只是通过使用
简化了我的设置。如果
mydivclass
没有提到只有一个
maindiv
以及一些元素和其他div，那么@user113716在（'body'）与parents（）相同之前不是parents？+1这需要进一步修改。。“那怎么隐藏呢？”拉菲，我有点困惑。。。你能再解释一下吗？你想隐藏
maindiv
中的所有子元素，而这个
maindiv
有一些
text
和其他输入字段以及一些其他div。@Mattis显然这行不通：如果你隐藏.mydivclass的父级，那么.mydivclass也会被隐藏。。。
$(".mydivclass").children().hide();

$('#target').show().parentsUntil('body').andSelf().siblings().hide();

var target = $('#target').show();
target = target.add(target.parentsUntil('body')).siblings().hide();

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