Question

我的HTML页面中有一个div列表，它们具有相同的类属性。

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

现在，所有这些div最初都被设置为JavaScript中的隐藏元素： $（“。card”）。hide（）;

然后，所有这些div都需要一个循环，这些循环只会使我们写的部分内容可见：

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

但是，HTML页面上仍然没有显示任何元素。请在此实现中建议错误。

Answer 1

您可以使用:lt() selector。它接受从零开始的索引。

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

Answer 2

另一种方法是使用javascript .slice() method

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

如果您想要显示不同的元素，这可以提供额外的好处，即您可以调整起始位置，例如$(".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>

Answer 3

要在迭代中显示<div>，请使用$(this)！

然后您传递的每个索引i1，因此您需要使用i1。。

在这种情况下，没有理由定义var i

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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++;
 });

通过jQuery隐藏前n个元素

4 个答案: