Question

我有一个div，我正在放一些物品（作为跨度）。如果项目太多，我希望显示“更多”链接，否则 - 没有链接问题是div的宽度是动态的（大约是页面的20％ - 这意味着我无法确定它的宽度）。
问题是 - 如果有太多项目 - 而不是显示额外的项目 - 显示“更多”链接，如何确定（最好在客户端，但也可能在服务器端）。

例如here有2个额外的项目，一开始不应该显示，但只有在用户点击“更多”链接（仍然不存在）之后。

我没有提到我的服务器端语言，因为如果问题只能在服务器端解决，那么只需一般描述即可。

感谢。

Answer 1

首先，HTML中的嵌入式样式？好恶！使用CSS文件和class属性其次，您应该使用<UL>作为列表，因为您似乎正在尝试构建列表。

要回答您的问题，您可以使用jQuery轻松完成此操作（如果在DIV上设置了ID）：

var maxCount = 3;
if ($('#myDiv').find('SPAN').length > maxCount)
{
  //over max, so hide something.
}

但实际上它应该更像（myList是无序列表的ID）：

var maxCount = 3;
if ($('#myList').children().length > maxCount)
{
  //over max, so hide something.
}

Answer 2

这是一个非常常见的功能。 Here's a jQuery plug-in called lessMore to do it。你可以这样称呼它：

$('#content').lessMore({
    limit: 5,
    numbers: false
});

使用现有的插件更适合代码重用，并且避免重新发明轮子。

确定div中有多少项

2 个答案: