Как настроить таргетинг на все соответствующие элементы с помощью селектора jQuery?

Question

Ниже jQuery должны отображаться первые 5 элементов в обоих неупорядоченных списках, но отображаются только первые 5 элементов в первом списке. Первые 5 элементов во втором списке не отображаются. Как можно использовать jQuery для отображения первых 5 элементов во всех списках с одинаковым именем класса?

$(function() {
  $('ul.list').children().hide();
  $('ul.list').children().slice(0, 5).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Answer 1

Ваше решение состоит в том, чтобы дать мне всех детей из всех списков и дать мне первые пять. Нельзя сказать, дайте мне первые пять из каждого списка. Чтобы использовать слайс, вам нужно выбрать каждый список и l oop поверх него. Было бы лучше использовать лучший селектор.

Используйте селектор nth-child, чтобы выбрать первые элементы в каждом списке.

$("ul li:nth-child(-n+5)").addClass("active")

li {
  display: none
}

li.active {
 display: list-item
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

И поскольку вы сказали, что это должно быть "прятки"

$("ul li").hide().filter(":nth-child(-n+5)").show()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

Чтобы ваш код заработал, он циклически обращается к uls и ссылается на их собственный список.

$('ul.list').children().hide();
$('ul.list').each(function() {
  $(this).children().slice(0, 5).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

Answer 2

Вы можете сделать это, используя jquery.

$(document).ready(function(){
  $('ul.list').children().hide();
  $("ul li:nth-child(-n+5)").show()
});

Answer 3

Нет jQuery или JavaScript необходимо. Просто используйте обычный CSS с li:nth-child(n+6):

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>