Javascript 用户脚本，遍历元素和测试属性

一般来说，我对用户脚本和JavaScript有点陌生，我很迷茫

基本上，我想做的是检查通过使用GetElementsByCassName获得的元素，获取“name”属性中的数据，查看它是否包含某些内容，如果是，将类名更改为其他内容

在伪ish代码中：

items = getElementsByClassName("item1");

for each item in items {
    if(item.attribute("name").contains("Hi"))
        item.attribute("class") = "item2";
}

如果有人能给我一些如何做到这一点的建议，那就太棒了。

试试这个：

// get all items with class 'item1'
var items = document.querySelectorAll('.item1');
var length = items.length;
for (var i = 0; i < length; i++) {
    // save reference to current item
    var item = items[i];
    // check if name contains 'Hi'
    if (item.getAttribute('name').indexOf('Hi') !== -1) {
        // update class
        item.className += ' item2';
    }
}

//使用类“item1”获取所有项目
var items=document.querySelectorAll（'.item1'）；
变量长度=items.length；
对于（变量i=0；i

---

演示：

Vitaliy的答案很准确，但值得一提的是，document.querySelectorAll（一个

节点列表

）返回的对象可以转换为JavaScript

数组

，以利用JavaScript提供的功能，例如：

// Convert the `NodeList` returned by `querySelectorAll` into an `Array`.
var items = Array.prototype.slice.call(document.querySelectorAll('.item1'));

items
    .filter(function (item) {
        // Filter Array to only include items that have a name attribute
        // that beings with "Hi".
        return item.getAttribute('name').indexOf('Hi') !== -1;
    })
    .forEach(function (hiItem) {
        // Add a class to these items.
        hiItem.className += ' item2';
    });

---

就我个人而言，我发现这些高阶数组函数更易于使用。

充分利用

querySelectorAll

的强大功能。另外，使用DOM方法；不要乱动

class

属性或

className

：

var items = document.querySelectorAll (".item1[name*='Hi']");

for (var J = items.length-1;  J >= 0;  --J) {
    items[J].classList.add ("item2");
}

---

---

更好的方法是使用：

---

是的，这就是它的工作原理。请参阅，和//。如果你被困在任何地方，让我们看看你的JS代码！哇，谢谢！我一直都在想这个问题，只是需要更多的理论。你为什么不干脆

[].filter.call（document.getElemntsByClassName（'item1'），function（）{…}）

？这也是有效的，我想这只是个人的偏好。我还觉得

Array.prototype.slice.call对初学者来说更容易理解。
$(".item1[name*='Hi']").addClass ("item2");