Как скрыть все элементы li в html после определенного no. элементов li

У меня список 10 ли, хочу скрыть после списка 3

<li> Test1 </li>
<li> Test1 </li>
<li> Test1 </li>
Click for more

После нажатия на кнопку «Далее» отобразятся все 10 списков.

Взгляните на селектор css n-й ребенок. Обновите свой вопрос, если у вас есть пробел, реализующий его

— 22.11.2018 07:37

javascript jquery html css

22.11.2018 07:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

582

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать селектор css nth. Для этого не нужно использовать JavaScript:

ul li:nth-child(n+4){
  display: none;
}

<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
<ul>

Использование jQuery

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

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
<ul>

22.11.2018 07:36

используйте : gt ()

Description: Select all elements at an index greater than index within the matched set.

$('#ul li:gt(2)').hide();

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='ul'>    
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li></ul>

22.11.2018 07:37

Ответ принят как подходящий

Попробуй это,

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<script>
jQuery('ul li:nth-child(3)').nextAll('li').hide();
</script>

22.11.2018 08:15

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

Сумма td значение в таблице с jquery

Автоматическое обновление AJAX / страница без обновления после отправки кнопки - HTML / PHP

Почему моя дата увеличивается на 2 дня, а я даю только значение 1

Пытаюсь преобразовать мой JavaScript в JQuery

Как показать невыбранный вариант из раскрывающегося списка в другом доступном раскрывающемся списке этой строки в таблице - jquery

Как распознать установленный файл cookie

Ajax + PHP + JQuery

Как создать проверку javascript / jquery в реальном времени на наличие запрещенных слов в поле ввода

Передача TempData с помощью RedirectToAction работает в Visual Studio, но не в рабочей среде

Если слово находится в двух столбцах, то приоритет результатов в mysql

Как скрыть все элементы li в html после определенного no. элементов li

Ответы 3

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

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