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

时间:2010-11-25 13:53:29

标签: jquery hide

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

4 个答案:

答案 0 :(得分: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();

答案 1 :(得分:8)

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

也许以下?

$('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()以外的其他对象,我会很高兴听到它!

答案 2 :(得分:4)

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

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

<强>更新

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

会隐藏.mydivclass

中的所有子元素

答案 3 :(得分:1)

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

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