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

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

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

Ответ 1

Вы можете немного сократить и ускорить его, используя :gt() (больше чем) селектор, например:

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

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

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

Ответ 2

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

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

Следующее предполагает, что начальное состояние скрыто.

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

Ответ 3

Есть только несколько альтернатив 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;
}