Làm thế nào để hiển thị số n phần tử đầu tiên trong jQuery?

Question

Tôi có một trang đó có 50 nguyên tố với lớp "lĩnh vực" cùng mà tất cả đều hiển thị không có tại thời điểm

<div class="fields" style="display:none;"> 
    ... 
</div> 
<div class="fields" style="display:none;"> 
    ... 
</div> 
<div class="fields" style="display:none;"> 
    ... 
</div> 
<div class="fields" style="display:none;"> 
    ... 
</div> 
... 

Làm thế nào để tôi chỉ hiển thị đầu tiên 3 hoặc bất cứ số. Cộng với đếm chúng với một số trên đầu như ví dụ dưới đây.

Vì vậy, ví dụ nếu tôi cần 3 đầu tiên này là những gì tôi cần divs để trông giống như

<div class="fields"> 
    <h1>Station 1</h1> 
</div> 
<div class="fields"> 
    <h1>Station 2</h1> 

</div> 
<div class="fields"> 
    <h1>Station 3</h1> 
</div> 
<div class="fields" style="display:none;"> 
    ... 
</div> 
... 

Vì vậy, về cơ bản chỉ có một số số lượng divs rằng tôi cần ... Tôi đã có số lượng các phần tử tôi cần hiển thị trong câu lệnh làm mờ này trong biến station_count. Cũng cần chú ý tôi cần một thẻ div với những ý tưởng count..any về cách để làm điều này

$("#number_station").blur(function(){ 
     var station_count = $(this).val(); 
        //code goes there 
    }); 

Answer 1

Làm thế nào để tôi chỉ hiển thị số 3 hoặc bất cứ điều gì đầu tiên.

$('div.fields:lt(3)').show(); 

Thêm đếm chúng với một số lượng trên đầu trang

$('div.fields:lt(3)').each(function (index) 
{ 
    $('<h1></h1>', {text: 'Station ' + index}).prependTo(this); 
}).show(); 

Demo: http://jsfiddle.net/mattball/TssUB/

---

Đọc các tài liệu API jQuery cho câu hỏi cơ bản như thế này:

• :lt() selector
• .prependTo()
• jQuery() (để tạo yếu tố mới)

Answer 2

Với

$(".fields").each(function() { 
     //do whatever like count then show/hide 

    }); 

bạn có thể lặp qua các divs ẩn. Vì vậy, với một biến đơn giản, bạn có thể bắt đầu/dừng bất cứ khi nào bạn cần.

Answer 3

Trong khi các câu trả lời khác sẽ hoạt động, gần đây tôi đã phát hiện và yêu thích phương thức jQuery slice().

$(".fields").slice(0, 3).each(function(index) { 
    // Do whatever you want to the first three elements 
}