Question

我对Userscripts和JavaScript有点新手，我很遗憾。

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

伪伪代码：

items = getElementsByClassName("item1");

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

如果有人能给我一些关于如何做到这一点的提示，那就太棒了。

Answer 1

试试这个：

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

演示：http://jsfiddle.net/vpetrychuk/9zBnn

Answer 2

Vitaliy的回答很明显，但值得一提的是，document.querySelectorAll（一个NodeList）返回的对象可以转换为JavaScript Array以便使用higher order Array functions 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';
    });

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

Answer 3

使用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");
}

更好的是，使用jQuery：

$(".item1[name*='Hi']").addClass ("item2");

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

3 个答案: