javascript - 如何在 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

How to I only show the first 3 or whatever number.

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

Plus count them with a count on top

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

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

---

阅读 jQuery API 文档，了解以下基本问题:

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