Question

我只想使用JavaScript，而不是jQuery。

我遇到两个问题，首先我想正确地将一个类属性应用/移除到 ul

中的每个 li 元素

理想情况下，当一个 li 元素有一个类集时，其余的没有设置类属性（如果设置则删除） - 但是当我需要从元素中取消/删除一个类时，我的测试我只能设置类似 class =“”的类，它有效但不理想。

我已经能够使用 getElementsByTagName

获取 ul 的子元素ID

<ul id="u">
    <li id='car' class="t">1</li>
    <li id='blue'>2</li>
    <li id='eight'>3</li>
    <li id='nasa'>4</li>
</ul>

var u = document.getElementById('u');
var li = u.getElementsByTagName('li');

我的第二个问题是循环 li 似乎给了我很多垃圾。

for (var i in li) {
  alert(li[i]["id"]);
}
//returns
car
blue
eight
nasa
undefined
undefined
undefined

最好的方法是什么？

Answer 1

因为那是你如何迭代一个对象，而不是一个数组。

循环标准将仅返回您期望的结果：

for (var i = 0; i < li.length; i++) {
    alert(li[i]["id"]);
}

要从中删除所有类，请在循环中使用它：

li[i].className = "";

仅删除特定类：

li[i].classList.remove("classNameHere");

如果要删除整个元素属性（不仅仅是重置类），请使用：

li[i].removeAttribute("class");

请参阅此处的所有三个示例：http://jsfiddle.net/vr9mm2vk/1/

Answer 2

使用标准for循环（而不是for in循环），因此您只需点击数字属性。

for (var i = 0; i < li.length; i++)

目前您正在点击所有属性，例如li['length']。

将类更改应用于所有getElementsByTagName - 纯JavaScript

2 个答案: