надлежащий способ скрыть динамические элементы с jQuery

Question

надлежащий способ скрыть динамические элементы с jQuery

У меня есть элемент отделения, который мой код заполнит динамической суммой ссылок. Используя jQuery, я хочу скрыть все ссылки кроме первой. Это - то, что я придумал, и это работает, я просто задавался вопросом - ли это лучший способ сделать это:

$("#panelContainer").each(function(n) {
  $(this).children().hide();
  $("#panelContainer a:first").show();
});

10

jquery hide

задан Dan Atkinson 6 August 2012 в 18:08

3 ответа

Другие вопросы по тегам:

jquery hide

Похожие вопросы:

score 5 · Answer 1

$("#panelContainer a:not(:first-child)").hide();

Поскольку элементы a добавляются динамически, может быть полезно добавить их как скрытые элементы, а затем показать первый (если это работает с целью вашего приложения) .

Далее предполагается, что начальное состояние скрыто.

$("#panelContainer a:first-child").show();  // Instead of hiding many, 
                                            //    you could show one.

score 3 · Answer 2

Есть всего несколько альтернатив только для CSS с примерами здесь. О совместимости селекторов читайте на quirksmode. Селекторы можно использовать и в jQuery с помощью функции hide().

Начиная с n+2 или второго дочернего узла

#panelContainer :nth-child(n+2) {
    display: none;
}

Все якоря, которые идут после первого дочернего якоря

#panelContainer > a + a {
    display:none;
}

@patrick, Все дочерние узлы, кроме первого

#panelContainer > :not(:first-child) {
    display: none;
}

Еще раз спасибо @patrick за предложение этого супер кроссбраузерного метода. Сначала скрыть все ссылки, затем показать первую

#panelContainer > a {
    display: none;
}

#panelContainer > a:first-child {
    display: inline;
}

score 9 · Answer 3

Вы можете сократить и немного ускорить этот процесс, используя селектор :gt() (greater than), вот так:

$("#panelContainer :gt(0)").hide();

Это предполагает, что все дочерние элементы являются якорями, что похоже на ваш вопрос, используйте a:gt(0), если вам нужно, чтобы он влиял только на ссылки и есть другие элементы.

Это короче, потому что... ну, короче. Это быстрее, потому что вы выбираете родителя один раз, детей один раз и фильтруете, а не родителя, детей, родителя снова и фильтруете потомков. Также, как и в оригинале, все ссылки будут показаны в случае, если javascript отключен.