Hide all elements except one div and its child element

Question

How to hide all elements except one div and its child element using jquery?

Answer 1

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 ) 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!