CODEWITHSUNDEEP
jquery
crayden
crayden

Reputation: 2270

How to target all matching elements with jQuery selector?

The below jQuery should show the first 5 elements in both unordered lists, but it only displays the first 5 elements in the first list. The first 5 elements in the second list are not displaying. How can jQuery be used to display the first 5 elements in all lists that have the same class name?

$(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>

Upvotes: 0

Views: 38

Answers (3)

epascarello
epascarello

Reputation: 207511

Your solution is saying give me all of the children of all the lists and give me the first five. It is not saying give me the first five of each list. To use slice, you would need to select each list and loop over it. It would be better to use a better selector.

Use nth-child selector to select the first elements in each list.

$("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>

And because you said it has to be "hide and show"

$("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>

The wya to get your code to work is looping over the uls and referencing their own list.

$('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>

Upvotes: 4

Waqas Altaf
Waqas Altaf

Reputation: 392

You can do this using jquery.

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

Upvotes: 0

j08691
j08691

Reputation: 207901

No jQuery or JavaScript necessary. Just use plain CSS with 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>

Upvotes: 0

Related Questions