Istnieje lista div w mojej stronie HTML ma ten sam atrybut klasy.

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

Teraz wszystkie te divs zostały początkowo ustawione jako ukryte elementy w JavaScript: $ (".card"). Ukryj ();

Następnie jest wymagana pętla na wszystkich tych div, która uczyni tylko niektóre z nich, dla których napisałem:

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

Ale nadal żaden element nie jest wyświetlany na stronie HTML.Prease sugeruje, co jest nie tak w tej implementacji.

1
ssharma 26 czerwiec 2017, 09:13

4 odpowiedzi

Najlepsza odpowiedź

Aby pokazać <div> s w iteracji użycia $(this)!

Następnie indeks w każdym wysłaniu i1, więc musisz użyć i1. . .

W tym przypadku nie ma powodu, aby zdefiniować 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.com/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>
1
caramba 26 czerwiec 2017, 06:19

CZĘŚĆ HTML

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

jQuery Część

$('.card').each(function(i1,obj) {
   if(i<5){
         $("#card"+i).show();
   }
   i++;
 });
1
Vinaysingh Khetwal 26 czerwiec 2017, 06:32

Inną alternatywą jest użycie JavaScript .slice() Metoda.

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

Daje to dodatkową korzyść, którą można dostosować pozycję wyjściową, jeśli chcesz pokazać różne elementy np. $(".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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
4
StudioTime 26 czerwiec 2017, 06:59

Możesz użyć :lt() selektor. Akceptuje wskaźnik zerowy.

$('.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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
4
Tushar 26 czerwiec 2017, 06:28