如果可能的话跨平台,我怎样才能在Javascript中选择类(但不是Jquery请-MooTools就好了 - )代码我无法添加ID? 具体来说,我想在下面的任何li上添加“cf”类:
HTML
<div class="itemRelated">
<ul>
<li class="even">
<li class="odd">
<li class="even">
我试图摆弄它,但缺少一些东西:
的Javascript
var list, i;
list = document.getElementsByClassName("even, odd");
for (i = 0; i < list.length; ++i) {
list[index].setAttribute('class', 'cf');
}
PS。这个问题现在有可能duplicates,(另一个one),但没有一个答案说得清楚。
答案 0 :(得分:14)
var list;
list = document.querySelectorAll("li.even, li.odd");
for (var i = 0; i < list.length; ++i) {
list[i].classList.add('cf');
}
对于旧版浏览器,您可以使用此功能:
var list = [];
var elements = document.getElementsByTagName('li');
for (var i = 0; i < elements.length; ++i) {
if (elements[i].className == "even" || elements[i].className == "odd") {
list.push(elements[i]);
};
}
for (var i = 0; i < list.length; ++i) {
if (list[i].className.split(' ').indexOf('cf') < 0) {
list[i].className = list[i].className + ' cf';
}
}
$$('.itemRelated li').addClass('cf');
或者如果您希望按类定位特定目标:
$$('li.even, li.odd').addClass('cf');
答案 1 :(得分:3)
使用一些较新的浏览器对象和方法。
纯JS:
细节:老式的方式,在一个大的循环中迭代的东西比在索引'i'的元素上迭代,这里没有大的科学。有一件事是使用classList
对象,这是一种在数组中添加/删除/检查类的智能方法。
var elements = document.querySelectorAll('.even','.odd'),
i, length;
for(i = 0, length = elements.length; i < length; i++) {
elements[i].classList.add('cf');
}
纯JS - 2:
详细信息:document.querySelectorAll返回一个类似于数组的对象,可以通过索引访问但没有Array方法。从Array.prototype调用切片会立即返回一个已获取元素的数组(可能是最快的NodeList - &gt;数组转换)。您可以在新创建的数组对象上使用.forEach
方法。
Array.prototype.slice.call(document.querySelectorAll('.even','.odd'))
.forEach(function(element) {
element.classList.add('cf');
});
纯JS - 3:
细节:这与v2非常相似,[].map
与Array.prototype.map
大致相同,除非您在此处声明一个空数组来调用map方法。它更短但更多(确实更多)内存消耗。 .map
方法对数组中的每个元素运行一个函数并返回一个新数组(在函数内部添加return会导致填充返回的值,这里它是未使用的)。
[].map.call(document.querySelectorAll('.even','.odd'), function(element) {
element.classList.add('cf');
});
选择一个并使用;)
答案 2 :(得分:2)
querySelectorAll
,getElementsByClassName
不支持,它不会同时获得两个类。他们都没有在iE7中工作,但谁在乎。
然后,只需迭代并添加到className
属性。
var list = document.querySelectorAll(".even, .odd");
for (var i = list.length; i--;) {
list[i].className = list[i].className + ' cf';
}
答案 3 :(得分:2)
正如其他人提到的那样,您应该使用.querySelectorAll()
方法来选择元素。 DOM还提供classList
API,支持添加,删除和切换类:
var list, i;
list = document.querySelectorAll('.even, .foo');
for (i = 0; i < list.length; i++) {
list[i].classList.add('cf');
}
一如既往IE9和bellow不支持API,如果你想支持这些浏览器你可以使用垫片,MDN有one。
答案 4 :(得分:1)
我知道这已经很老了,但是有什么理由不能简单地做到这一点(除了潜在的浏览器支持问题)?
document.querySelectorAll("li.even, li.odd").forEach((el) => {
el.classList.add('cf');
});