如何使用 javascript（无框架）从列表中显示 X 数量的 LI？

Question

我有一个由服务器填充的菜单，但我无法访问该服务器。所以我仅限于在客户端执行此操作。

现在导航上有一个下拉菜单，有 14 个选项。客户只想展示其中的 3 个。

他们没有使用任何像 jquery 或 mootools 这样的框架，所以我必须用老式的方式来做这件事，然而，我却陷入了困境。

• 选项 1
  
• 选项 2
  
• 选项 3
  
• 选项 4
  
• 等
  

将 display:none 添加到列表项 4-14 的 javascript 代码是什么？

（这也帮助我回到 JS 基础知识而不是依赖框架）。

感谢您的帮助！

Answer 1

您可以执行 getElementById() 来获取菜单，然后执行 getElementsByTagName() 来获取 LI，它将返回一个数组（例如 items[]）。
然后将 items[3] 的样式更改为 items[13]。

编辑

我给你写了一个小代码：

var menu = document.getElementById('mylist');
var LIs = menu.getElementsByTagName('li');
for(var i = 3; i< 14; i++)
    LIs[i].style.display='none';

Answer 2

您可以在 JavaScript 中使用 CSS。

这是参考：http://codepunk.hardwar.org.uk/css2js.htm

另外，请查看 Mozilla JavaScript 参考。

Answer 3

像这样的东西吗？ （从我的头顶上下来，抱歉，如果马虎）

var children= document.getElementByid("mylist").childNodes;
for (var i = 0; i < children.length; i++){
    if (i < 2) children[i].style.display = "none";
}

Answer 4

您必须获取列表的子节点，并将客户端不希望看到的每个子节点的 style.display 属性设置为 none。这听起来不太棘手，但子节点集合可以包含元素、文本节点、注释等，因此您必须检查以确保该节点是具有 tagName 的元素处理前的“LI”。下面是一些可以解决这个问题的代码。

for (var node = document.getElementById('mylist').firstChild; node != null; node = node.nextSibling) {
   if (node.type === 1 && node.tagName.toUpperCase() === "LI") {
      if (/* node is not one of the ones your client wants to see */) {
         node.style.display = 'none';
      }
   }
}