There is a list of divs in my HTML page having the same class attribute.

<div class="card"></div>
.
.
<div class="card"></div>

Now, all these divs have been initially set as hidden elements in JavaScript: $ (".card").hide();

Then, there is a loop required on all of these divs which will make only some of them visible for which I wrote:

var i =0;
$('.card').each(function(i1,obj) {
   if(i<5){
          $(obj).show();
          //$(this).find('card').show();//tried this also
   }
   i = i+1;
 });

But, still, no element is shown on the HTML page.Please suggest what is wrong in this implementation.

There is a list of divs in my HTML page having the same class attribute.

<div class="card"></div>
.
.
<div class="card"></div>

Now, all these divs have been initially set as hidden elements in JavaScript: $ (".card").hide();

Then, there is a loop required on all of these divs which will make only some of them visible for which I wrote:

var i =0;
$('.card').each(function(i1,obj) {
   if(i<5){
          $(obj).show();
          //$(this).find('card').show();//tried this also
   }
   i = i+1;
 });

But, still, no element is shown on the HTML page.Please suggest what is wrong in this implementation.

• javascript
• jquery
• html
• css

• You're already in the class .card why are you trying to find .card again inside the function? if you just do $(this).show(); it should work – user5014677 Commented Jun 26, 2017 at 6:17
• it is what I also tried apart from the line just above it,but the $(obj) line also doesn't seem to work. – ssharma Commented Jun 26, 2017 at 6:18
• Do you only want to show top 5 .card in DOM? – Abhishek Pandey Commented Jun 26, 2017 at 6:18
• yes that is the case – ssharma Commented Jun 26, 2017 at 6:19
• 1 Try $('.card:lt(5)').show() – Tushar Commented Jun 26, 2017 at 6:20

4 Answers 4

Another alternative is to use javascript .slice() method

$(".card").slice(0, 5).show(); /* start at index 0 and show while less than 5 */

This gives the added benefit that you can adjust the starting position if you want to show different elements e.g. $(".card").slice(3, 8).show();

for (let i=0; i<10; i++) {
  $('body').append(`<div class="card">${i+1}</div>`);
}

$(".card").slice(0, 5).show(); /* start at index 0 and show while less than 5 */

.card {
  display: none;
}

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

You can use :lt() selector. It accepts the zero-based index.

$('.card:lt(5)').show();

for (var i = 0; i < 10; i++) {
  $('body').append(`<div class="card">${i + 1}</div>`);
}

$('.card:lt(5)').show();

.card {
  display: none;
}

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

UPDATE

All $ (".card").hide(); does is: it sets the inline style to display: none;. To overwrite inline-styles you can use the CSS important! keyword and use :nth-child(-n+6) like:

.card:nth-child(-n+6){ /* (-n+6) => will show the first 5 items */
    display:block !important;
}

See full running working code snippet

$ (".card").hide();

.card {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 5px;
}

.card:nth-child(-n+6){
    display:block !important;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>

-- old answer --

To show the <div>s in the iteration use $(this)!

Then the index in the each you passed i1 so you need to use i1 . . .

There is no reason in this case to define var i

$('.card').each(function(i1,obj) {
   if(i1 < 5){
      $(this).show();
   }
 });

.card {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 5px;
  
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>

HTML PART

<div class="card" id="card1"></div>
<div class="card" id="card2"></div>
.
.
<div class="card" id="cardn"></div>

jquery Part

$('.card').each(function(i1,obj) {
   if(i<5){
         $("#card"+i).show();
   }
   i++;
 });