Javascript 仅显示X个div的数量

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

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

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

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

---

任何帮助都将不胜感激D

您必须隐藏所有内容，然后显示所需内容：

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

---

更新的小提琴：

您必须隐藏所有小提琴，然后显示所需的小提琴：

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

---

更新的fiddle:

为什么不将div设置为

display:none并使用您的确切代码片段
$（'.categoryThumbnailList_item:lt（5）'）.show（）显示它们页面加载

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

我已经更新了小提琴，希望它有帮助：

更新：
如果您想完全删除div，当然可以使用jQuery函数
.REMOVE（）
。如果您根本不希望div出现在页面上，那么您必须在服务器端处理这个问题，而不是将其删除
 为什么不将div设置为
display:none并使用您的确切代码片段
$（'.categoryThumbnailList_item:lt（5）'）.show（）显示它们页面加载

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

我已经更新了小提琴，希望它有帮助：

更新：
如果您想完全删除div，当然可以使用jQuery函数
.REMOVE（）
。如果您根本不希望div出现在页面上，那么您必须在服务器端处理这个问题，而不是将其删除
 然后删除索引大于4的所有div：

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

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

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

示例
或者，您可以创建一个函数来完成此工作

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

更新

或

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

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

更新

或

如果要使用CSS隐藏它们，请尝试以下操作（给定选择器）：

这是一个例子

注意：

这只起作用。
如果您想用CSS隐藏它们，请尝试以下方法（给定您的选择器）：

这是一个例子

注意：

这只起作用。
这是在事件上，还是应该只有
n
div始终可见？如果是后者，你只需要CSS就可以做到这一点。我只希望5个div是可见的，读取的内容不会显示，也不会加载到页面上。如果将任何div的可见性设置为“隐藏”，超过5个div后，它们仍将加载，但将被隐藏。我不想那样。。。我根本不想让它们加载。如果你根本不想让它们加载，请在服务器端执行此操作。如果您希望它们只是不可见的，请尝试
display:none-这是最新的JSFIDLE。如果您想要一个只使用css的解决方案，请查看我的答案。这是在事件上，还是应该只有
n
divs始终可见？如果是后者，你只需要CSS就可以做到这一点。我只希望5个div是可见的，读取的内容不会显示，也不会加载到页面上。如果将任何div的可见性设置为“隐藏”，超过5个div后，它们仍将加载，但将被隐藏。我不想那样。。。我根本不想让它们加载。如果你根本不想让它们加载，请在服务器端执行此操作。如果您希望它们只是不可见的，请尝试
display:none-这是最新的JSFIDLE。如果您想要一个只使用css的解决方案，请查看我的答案。@jwatts1980谢谢您的回答。刚刚在我当前的项目中使用了
visibility:hidden
，对此感到困惑；）@谢谢你说得对。刚刚在我当前的项目中使用了
visibility:hidden
，对此感到困惑；）。真棒！这个很好用。但是有没有办法让隐藏的div根本不加载呢？因为若我有数百个div，它们都会被隐藏，但它们也会加载到页面上。我不希望这样。不要使用脚本，它是客户端，您需要选择不在服务器端加载div。好的，您可以在打印每个
div
元素时将style属性设置为
display:none
。然后，你的原始代码工作得很好。真棒的人！这个很好用。但是有没有办法让隐藏的div根本不加载呢？因为若我有数百个div，它们都会被隐藏，但它们也会加载到页面上。我不希望这样。不要使用脚本，它是客户端，您需要选择不在服务器端加载div。好的，您可以在打印每个
div
元素时将style属性设置为
display:none
。那么，您的原始代码就可以正常工作了。