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

栏目: jQuery · 发布时间: 6年前

内容简介:忽略这一点,似乎没有达到预期的效果.也许以下?更新

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

也许以下?

$('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);

此例程查找上下文中的所有元素(默认为<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()之外的其他对象,我会很高兴听到它!


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Hit Refresh

Hit Refresh

Satya Nadella、Greg Shaw / HarperBusiness / 2017-9-26 / USD 20.37

Hit Refresh is about individual change, about the transformation happening inside of Microsoft and the technology that will soon impact all of our lives—the arrival of the most exciting and disruptive......一起来看看 《Hit Refresh》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具