在javascript中选择并添加类

时间:2014-01-23 21:17:14

标签: javascript dom mootools

如果可能的话跨平台,我怎样才能在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');
}

JSFiddle

PS。这个问题现在有可能duplicates,(另一个one),但没有一个答案说得清楚。

5 个答案:

答案 0 :(得分:14)

使用普通的javascript:

var list;
list = document.querySelectorAll("li.even, li.odd");
for (var i = 0; i < list.length; ++i) {
   list[i].classList.add('cf');
}

Demo

对于旧版浏览器,您可以使用此功能:

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';
    }
}

Demo


使用Mootools:

$$('.itemRelated li').addClass('cf');

Demo

或者如果您希望按类定位特定目标:

$$('li.even, li.odd').addClass('cf');

Demo

答案 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非常相似,[].mapArray.prototype.map大致相同,除非您在此处声明一个空数组来调用map方法。它更短但更多(确实更多)内存消耗。 .map方法对数组中的每个元素运行一个函数并返回一个新数组(在函数内部添加return会导致填充返回的值,这里它是未使用的)。

[].map.call(document.querySelectorAll('.even','.odd'), function(element) {
    element.classList.add('cf');
});

选择一个并使用;)

答案 2 :(得分:2)

在IE8中支持

querySelectorAllgetElementsByClassName不支持,它不会同时获得两个类。他们都没有在iE7中工作,但谁在乎。

然后,只需迭代并添加到className属性。

var list = document.querySelectorAll(".even, .odd");
for (var i = list.length; i--;) {
    list[i].className = list[i].className + ' cf';
}

FIDDLE

答案 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');
});

支持:https://caniuse.com/#feat=es5