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() selector
.prependTo()
jQuery()（用于创建新元素）

Answer 2

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

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

Answer 3

用

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

    });

你可以迭代隐藏的div。因此，只需一个简单的变量，您就可以随时启动/停止。

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

3 个答案: