javascript - 只显示 X 数量的 Div

Question

如何只显示一定数量的 div？现在我使用下面的代码只显示 5 个 div .. 但它不能正常工作：

$('.categoryThumbnailList_item:lt(5)').show();

我创建了一个 JSFiddle 来展示这个问题：

http://jsfiddle.net/gXxEs/

我也不希望 div 加载和隐藏。我希望 div 根本不出现，也不必加载到屏幕上。

任何帮助，将不胜感激！:D

Answer 1

你必须隐藏所有然后显示你想要的：

$(document).ready(function() {
    $('.categorythumbnaillist_item').hide();
    $('.categorythumbnaillist_item:lt(5)').show();
});

更新小提琴：http: //jsfiddle.net/gXxEs/9/

Answer 2

为什么不在你的 CSS 中设置 div并在页面加载display: none;时用你的确切片段显示它们？$('.categoryThumbnailList_item:lt(5)').show();

小心，你的小提琴有问题。jsfiddle 会在 onload 事件中自动包装脚本块中的代码（在左侧可更改）。

我已经更新了小提琴，希望对您有所帮助：http: //jsfiddle.net/7XneS/2/

更新： 如果你想完全删除div，你当然可以使用 jQuery 函数.remove()。如果您不希望 div 完全出现在页面上，则必须在服务器端处理此问题，而不是将它们排除在外。

Answer 3

然后删除所有索引大于 4 的 div：

$(document).ready(function() {
    $('.categorythumbnaillist_item:gt(4)').remove();
});

示例小提琴

Answer 4

或者，您可以创建一个函数来完成这项工作

function showLimit(selector, count) {
    $(selector).each(function() {
        if (count > 0) {
            $(this).show();
            count--;
        } else {
            $(this).hide();
        }
    });
}

更新

或者

function showLimit(selector, count) {
    $(selector).hide();
    $(selector+':lt('+count+')').show();
}

Answer 5

如果你想用 CSS 隐藏它们，试试这样的方法（给定你的选择器）：

.categorythumbnaillist_item {
    display: none;
}

.categorythumbnaillist_item:nth-of-type(-n+5) {
    display: block;
}

这是一个小提琴。

笔记：

这仅在浏览器支持 CSS3时才有效。