Скрыть все элементы, кроме одного div и его дочернего элемента - PullRequest
Новая
       9

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

7 голосов
/ 25 ноября 2010

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

Ответы [ 4 ]

13 голосов
/ 25 ноября 2010

Чтобы нацелиться на вложенный элемент и убедиться, что он показывает только один элемент, вам нужно будет скрыть его братьев и сестер, а также братьев и сестер всех его предков до <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();
8 голосов
/ 25 ноября 2010

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

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

$('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(), я был бы очень рад это услышать!

4 голосов
/ 25 ноября 2010

Это будет делать $(".mydivclass").not(this).hide();

mydivclass - это класс для всех элементов div, которые необходимо скрыть

Обновление: 

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

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

1 голос
/ 19 сентября 2014

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

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