Javascript 通过jQuery隐藏前n个元素

在我的HTML页面中有一个具有相同class属性的div列表

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

.
.

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

然后，在所有这些div上都需要一个循环，它只会使其中一些div可见，我为此写了：

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

var i=0；
$（'.card'）。每个（功能（i1，obj）{
如果（i更新

所有
$（“.card”）.hide（）；
的作用是：将内联样式设置为
display:none；
。要覆盖
内联样式，可以使用CSS
重要！
关键字并使用like:

请参阅完整运行的工作代码段


$（“.card”）.hide（）；
.card{
宽度：100px；
高度：100px；
背景颜色：橙色；
保证金：5px；
}
.卡：第n个子（-n+6）{
显示：块！重要；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
更新

所有
$（“.card”）.hide（）；
的作用是：将内联样式设置为
display:none；
。要覆盖
内联样式，可以使用CSS
重要！
关键字并使用like:

请参阅完整运行的工作代码段


$（“.card”）.hide（）；
.card{
宽度：100px；
高度：100px；
背景颜色：橙色；
保证金：5px；
}
.卡：第n个子（-n+6）{
显示：块！重要；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
HTML部分

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


.
.

jquery部分

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

$（'.card'）。每个（功能（i1，obj）{
如果（iHTML部分

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


.
.

jquery部分

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

$（'.card'）。每个（功能（i1，obj）{
如果（i可以使用。它接受基于零的索引

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


for（变量i=0；i<10；i++）{
$（'body'）.append（`${i+1}`）；
}
$（'.card:lt（5）'）.show（）；
.card{
显示：无；
}
您可以使用。它接受从零开始的索引

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


for（变量i=0；i<10；i++）{
$（'body'）.append（`${i+1}`）；
}
$（'.card:lt（5）'）.show（）；
.card{
显示：无；
}
另一种选择是使用

这增加了一个好处，即如果要显示不同的元素，可以调整起始位置，例如
$（“.card”）.slice（3,8）.show（）；


for（设i=0；i另一种选择是使用

这增加了一个好处，即如果要显示不同的元素，可以调整起始位置，例如
$（“.card”）.slice（3,8）.show（）；


for（设i=0；i您已经在类中了。card为什么要在函数中再次查找.card？如果您只需执行
$（this）.show（）；
它应该可以工作除了它上面的行之外，我还尝试了$（obj）行似乎也不起作用。您是否只想在DOM中显示前5名
.card
？是的，这就是caseTry
$（'.card:lt（5）'）。show（）
您已经在类中。card为什么要在函数中再次查找.card？如果您只想
$（this.show（））
它应该可以工作除了上面的那一行之外，我也试过了，但是$（obj）行似乎也不起作用。您是否只想在DOM中显示前5名
.card
？是的，这就是caseTry
$（'.card:lt（5））.show（）
div太多，为所有div分配id会很麻烦。您可以动态分配id div太多，为所有div分配id会很麻烦。您可以动态分配id