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();
});

示例fiddle

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;
}

这是fiddle。

注意：

这仅适用于if the browser supports CSS3。

仅显示X的金额

5 个答案: