隐藏除一个div及其子元素之外的所有元素 [英] Hide all elements except one div and its child element
问题描述
如何使用jquery隐藏除一个div及其子元素以外的所有其他元素?
忽略这一点，似乎并没有达到预期的效果.
可能是以下情况?
$('body').children().hide();
$('#mydiv').children().andSelf().show();
更新
问题是，子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()，那么我将非常高兴听到它！ /p>
How to hide all elements except one div and its child element using jquery?
Ignore that, does not appear to have the desired effect.
Perhaps the following?
$('body').children().hide();
$('#mydiv').children().andSelf().show();
Update
The problem is, the visible state of a child DIV often relies on it's parent being visible. So you need to have an entire tree down to the DIV you want remaining visible.
You need to hide everything apart from that tree, the trick is identifying all children of the DOM structure that are not in the DIV ancestry, and all siblings of the ones that are.
Finally!
Managed to write a solution. Tried a recursive approach at first, but on complicated pages it died with "too much recursion", so wrote a list-based version that works just fine. It is in the form of a single-function jQuery plugin, as that seems to be the most useful approach.
(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);
This routine finds all elements within the context (which defaults to <body>) that exclude the object and it's ancestors.
This would achieve the result of the question:
$('#mydiv').allBut().hide();
Another use could be to retain all objects within a container with a certain class, fading out all the others:
$('.keep').allBut('#container').fadeOut();
Bare in mind that the layout and positioning of any given element can depend heavily on surrounding elements, so hiding something like that is likely to alter the layout unless things are absolutely positioned. I can see uses for the routine anyhow.
However!
Another poster came up with the following which returns the same information using a routine already built-in to jQuery which I had not seen.
target.add(target.parentsUntil(context)).siblings();
or without the variable
target.parentsUntil(context).andSelf().siblings();
Which is a tad simpler, must scour documentation in future.
PS. If anyone has a better way of checking if a given jQuery object is equivalent to another than a.filter(b).size() != b.size() I would be very glad to hear it!
这篇关于隐藏除一个div及其子元素之外的所有元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
