如何在jQuery中显示前n个元素？

Question

我有一个页面,其中包含50个具有相同类"字段"的元素,这些元素目前都不显示

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

我怎么只显示前3或任何数字.另外,如下面的示例所示,将它们计算在顶部.

所以,例如,如果我需要前3个,这就是我需要div的样子

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

所以基本上只需要一些我需要的div数...我已经拥有了我需要在station_count变量中的这个模糊语句中显示的元素数量.另外请注意我需要一个带有计数的span标签.有关如何执行此操作的任何想法

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

Answer 1

我怎么只显示前3或任何数字.

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

加上他们的数量在顶部

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

演示:http://jsfiddle.net/mattball/TssUB/

阅读jQuery API文档以获取如下基本问题:

• :lt() 选择
• .prependTo()
• jQuery() (用于创建新元素)

Answer 2

虽然其他答案可行,但我最近发现并喜欢jQuery slice()方法.

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