在javascript中选择并添加类 [英] Select and add class in javascript

问题描述

如果可能，跨平台，如何在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）; （i = 0; i< list.length; ++ i）{
 list [index] .setAttribute（'class'，'cf'）; 
 
} 
  

JSFiddle

ps。这个问题显然有可能重复（另一个一个），但没有一个答案清楚。

解决方案

使用简单的javascript：

  var list; 
 list = document.querySelectorAll（li.even，li.odd）; 
 for（var i = 0; i< list.length; ++ i）{
 list [i] .classList.add（'cf'）; 
} 
  

演示

对于旧版浏览器，您可以使用这个： p>

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

演示

---

使用Mootools：

  $$（'。itemRelated li'）。addClass（'cf'）; 
  

演示

或者要按类别定位：

  $$（'li.even，li.odd'）。addClass（'cf'）; 
  

演示

Cross Platform if possible, how can I select classes in Javascript (but not Jquery please -MooTools is fine though-) on code that I can't add an ID? Specifically, I want to add the class "cf" on any li below:

HTML

<div class="itemRelated">
  <ul>
<li class="even">
<li class="odd">
<li class="even">

I tried to fiddle it but something is missing:

Javascript

 var list, i;
list = document.getElementsByClassName("even, odd");
for (i = 0; i < list.length; ++i) {
    list[index].setAttribute('class', 'cf');
}

JSFiddle

ps. This question phenomenally has possible duplicates, (another one) but none of the answers makes it clear.

解决方案

Using plain javascript:

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

Demo

For older browsers you could use this:

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

---

Using Mootools:

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

Demo

or if you want to target specific by Class:

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

Demo

这篇关于在javascript中选择并添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！