通過jQuery隱藏前n個元素

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

另一種選擇是使用javascript .slice()方法

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

這提供了額外的好處，如果您想顯示不同的元素，例如$(".card").slice(3, 8).show(); ，您可以調整起始位置$(".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 2

您可以使用:lt()選擇器。 它接受從零開始的索引。

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

更新

所有$ (".card").hide(); 確實是：它將內聯樣式設置為display: none; . 要覆蓋inline-styles您可以使用 CSS important! 關鍵字並使用:nth-child(-n+6)像：

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

查看完整運行的工作代碼片段

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

——舊答案——

要在迭代中顯示<div> s，請使用$(this) ！

然后每個你通過i1的索引，所以你需要使用i1 。 . .

在這種情況下沒有理由定義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>

Answer 4

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