Скрыть все элементы, кроме одного div и ее дочерний элемент

Как скрыть все элементы, кроме одного div и его дочернего элемента с помощью jquery?

7
hide jquery

4 ответов

игнорировать это, похоже, не имеет желаемого эффекта.

возможно, в следующем?

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

имейте в виду, что макет и позиционирование любого данного элемента могут сильно зависеть от окружающих элементов, поэтому скрытие чего-то подобного, вероятно, изменит макет если только вещи не расположены абсолютно. Во всяком случае, я вижу применение этой рутине.

8

чтобы нацелиться на вложенный элемент и убедиться, что он единственный, вам нужно будет скрыть его братьев и сестер, а также братьев и сестер всех его предков до <body>.

пример: http://jsfiddle.net/patrick_dw/gSXYa/1/

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

EDIT: решение, которое я добавил выше, немного более сжато.

пример: http://jsfiddle.net/patrick_dw/gSXYa/

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

это $(".mydivclass").not(this).hide();

mydivclass - это класс, заданный всем divs, который должен быть скрыт

обновление:

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

скроет все дочерние элементы внутри .mydivclass

4

простое решение: скрыть все, а затем показать один (в этом случае второй div и его дочерние элементы).

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