一次调用数组中的多个元素？

Question

这是我要练习的情况。 现在，我只是在学习Javascript。 我正在控制台中进行练习，碰到了我需要弄清楚的一堵墙。

我想做的只是在chrome控制台中进行简单的CSS样式更改。 这是我到目前为止的

var get = document.getElementById('ul-li-menu');

然后，我在该变量所包含的垂直菜单中获得了li的ul和锚点的完整列表。

我可以通过下面的代码访问所需的锚标签。

var li = get.getElementsByTagName('a');

现在我有了很多东西，我知道我只需要像这样在控制台中调用变量。

li

这就是我的困惑。 我只是为了练习，希望更改所有这些锚标记的显示。

这是我最初编写的代码。

li.style.display = "inline";

但这不起作用。

我不想使用[0]或[3]这样的括号符号访问此数组中的每个元素。

我想一次访问所有数组中的锚元素约13个，以将显示更改为内联。 有什么办法吗？

预先谢谢大家。

Answer 1

只需经历for循环。

for(var i = 0; i < li.length; i++){
    li[i].style.display = "inline";
}

Answer 2

如果没有JQuery，则需要遍历数组内的每个对象

Answer 3

我建议您使用JQuery以获得更快的方法：

 $("button").click(function(){ if($("li").css("display") == "table"){ $("li").css("display","inline-block"); } else{ $("li").css("display","table"); } }); 

 li { display: table; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <button type="button">Change Style</button> 

Answer 4

您需要遍历它们并分别设置每个。 如果您使用的是jQuery或es6，则可以通过一种更简洁的方式来做到这一点，但是这就是仅使用普通JavaScript即可实现的方法。

var listItems = document.getElementById('theUlElement').getElementsByTagName('li');

for (var li = 0; li < listItems.length; li ++){
  listItems[li].style.display = "inline";
}

Answer 5

您可以在编号上使用Javascript动态添加自定义CSS样式规则。 锚标签

// 句法

// stylesheet.addRule（rule，index）; 👍

Answer 6

对数组的每个元素执行相同操作的另一个有用选项是forEach 。 不幸的是，您的变量li不是数组，而是一个NodeList ，其浏览器对forEach 支持有限 。

也就是说，您实际上可以在NodeList上使用forEach的阵列版本，而不会遇到任何麻烦！ 这将适用于IE9 +：

[].forEach.call(li, function(item) {
    item.style.display = 'inline';
});
// Array.prototype.forEach.call(...) would also work.

如果您不关心浏览器支持，则可以使用NodeList本机forEach ：

li.forEach(function(item) {
    item.style.display = 'inline';
});