选择类的所有元素并遍历每个偶数对象（第 n 个子（偶数）替换）答案

【问题标题】：select all elements of class and iterate over each even object (nth child (even) replacement)选择类的所有元素并遍历每个偶数对象（第 n 个子（偶数）替换）
【发布时间】：2013-08-01 14:28:36
【问题描述】：

我正在显示字母表，每个字母都具有相同的背景（宽度为 31px）。我需要一半的字母宽度为 30px。由以下人员处理：

div.alpha:nth-child(even) {width: 30px;}

但是，由于伪兼容性问题，这在 ie 中不起作用。

我正在寻找一种纯 javascript 替代品，适用于 IN quirks mode。

我试过了：

function letterwidth () {
    var a = document.querySelectorAll ('div.alphabet');
    for (var i = 0, b = a.length; i < b; i++){
        if (i % 2 == 0) {
            a[i].style.width = '30px';
        }
    }
}

但我得到一个错误：

SCRIPT438：对象不支持属性或方法“querySelectorAll”

【问题讨论】：

我知道您在另一条评论中说您不想引入 jQuery，但是它的选择器引擎发出嘶嘶声呢？ sizzlejs.com

标签： javascript css quirks-mode

【解决方案1】：

如果浏览器不支持querySelector，则需要使用常规的 DOM 遍历方法：

var el  = [],
    div = document.getElementsByTagName('div');

for (var i=0; i<div.length; i++) {
    if (div[i].className.indexOf('alphabet') != -1) 
        el.push(div[i]);
}

for (var i=0; i<el.length; i++){
    if (i % 2 == 0)
         el[i].style.width = '30px';
}

FIDDLE

【讨论】：

【解决方案2】：

我假设您使用的是不支持 document.querySelectorAll 的旧版 Internet Explorer

Browsers where you can use querySelectorAll.

【讨论】：

我使用的是 ie9，但该网站的编码很糟糕，因此除非在怪癖模式下，否则无法正确显示。
我知道什么是怪癖模式，我的问题是它必须处于怪癖模式才能正常运行而无需重新编码

【解决方案3】：

Object doesn't support property or method 'querySelectorAll'

过时的浏览器。

jQuery 是纯 JavaScript。所以除非你想自己重写选择器解析器最终得到类似于 jQuery 的东西，否则我建议你直接使用它。

【讨论】：

我知道，我通常会使用 jquery 来执行此操作，但如果我不需要的话，我不想仅仅为了这个而引入它。