javascript - 将链式方法附加到 JavaScript 中的元素集合

标签 javascript collections methods element chaining

这(至少在目前)纯粹是实验,但我很好奇:有没有办法将方法(通过原型(prototype)设计)附加到元素集合?我测试了以下代码:

<div>a</div>
<div>b</div>
<div>c</div>
<script>
NodeList.prototype._ = function(s)
 {
    for (x = 0; x < this.length; x++)
     {
        eval('this[x]' + '.' + s);
     }
    return this;
 }
document.getElementsByTagName('div')._("style.backgroundColor = 'red'")._('innerHTML += x');
</script>

目前,它在 Opera 中运行得很好;正如预期的那样,在所有 div 元素上调用 _ 方法,然后将传递给它的字符串依次 eval() 到每个元素上。请注意,_ 方法允许链接,并且这也已被演示,调用 _ 将预测的 x 迭代器变量附加到每个元素的innerHTML。

现在有两个问题...

首先,有没有更好的方法来解决这个问题?我一直希望能够做到 document.getElementsByTagName('div').style.backgroundColor = "red";,但可惜的是,它还没有实现。这就是我首先这样做的原因,也是我如此简洁地命名该方法的原因;我正在尝试尽可能地模仿它。

其次,假设这是一个合理的用法,我将如何让它在 Firefox 中工作?该浏览器相当于 NodeList 的是 HTMLCollection,但尝试对后者进行原型(prototype)设计根本不会成功。有建议吗?

最佳答案

我已经制定了我认为可以作为可行解决方案的方案;使用此方法链式修改元素集合有什么根本性的坏处吗?

<script>
_ = function()
 {
    for (x = 0; x < arguments[0].length; x++)
     {
        for (y = 0; y < arguments[1].length; y++)
         {
            eval('arguments[0][x]' + '.' + arguments[1][y]);
         }
     }
 }
</script>

用法:

divs = document.getElementsByTagName('div');
_(divs, ["style.color = 'red'", "innerHTML += x"]);

关于javascript - 将链式方法附加到 JavaScript 中的元素集合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/603870/

相关文章:

javascript - 我可以在 EJS 中渲染多个源吗

java - JFrame 不显示输出?

一组单选按钮的 JavaScript 条件语句

Javascript - 获取字符串中的字符串

mongodb - MongoCollection<Document> 类型中的方法aggregate(List<? extends Bson>) 不适用于参数 (BasicDBObject)

Java 8 按属性区分

c# - 将并发字典保存线程不安全的集合是否需要在C#中锁定

javascript - var functionName = function() {} vs function functionName() {}

java - 调用方法完全没有任何作用?

java - Highchart Java 导出图像