Переключение тегов <LI>в зависимости от количества

Question

У меня есть следующий фрагмент кода, и мне требуется показать только первые 2 <LI> и скрыть все остальные <LI>. Как я могу достичь этого? Мне нужно переключить показ и скрыть нажатие кнопки с помощью jquery.

Фрагмент кода:

<UL>
  <LI/>
  <LI/>
  <LI/>
  <LI/>
  <LI/>
</UL>

Answer 1

Вы можете использовать селектор :gt для выбора элементов выше указанного индекса. Поскольку элементы индексируются 0, выбирается все, что выше индекса 1:

$("#someButton").click(function() {
    $("li:gt(1)").toggle();
});

Метод toggle скрывает элементы, которые в данный момент видимы, и показывает элементы, которые в данный момент скрыты. Поэтому нажатие #someButton будет многократно переключать элементы li с индексом> 1 между скрытым и видимым.

Вероятно, также стоит упомянуть, что есть селектор :lt , который позволяет выполнять выборку, прямо противоположную.

Answer 2

Джеймс Аллардис имеет лучший ответ.Если вы хотите, чтобы элементы списка были скрыты до того, как список будет обработан, поместите это в ваш код где-то

$('ul li:gt(1)').hide();

Answer 3

Самое простое решение:

  <ul>
    <li style='display:none'>first</li>
    <li style='display:none'>second</li>
    <li>third</li>
    <li>forth</li>
    <li>fifth</li>
 </ul>

Затем включите элементы li:

$('li').each(function(index) {
    $(this).toggle(600);
});

Попробуйте здесь