原型 Js 多选器

Question

这是我的 css 路径：

#product_composite_configure .entry-edit .buttons-set.a-right .scalable

如何使用原型 js 选择它？我想为这个项目添加一个新属性。

这不起作用：

<script type="text/javascript">
    $$('#product_composite_configure .entry-edit .buttons-set.a-right .scalable').setAttribute("test","test");
</script>

谢谢

[更新]

这也不起作用：

$$('div#product_composite_configure div.entry-edit div.buttons-set button.scalable').setAttribute("test","test");

Answer 1

$$() 选择器返回所选元素的数组。所以你需要遍历数组或者使用内置的迭代器invoke()。

例如

$$('.css_class').invoke('writeAttribute','checked',true);

或您的 CSS 选择器

$$('#product_composite_configure .entry-edit .buttons-set.a-right .scalable').invoke('writeAttribute',"test","test");

我使用 writeAttribute() 而不是 setAttribute()，因为它适用于 PrototypeJS 支持的所有浏览器

还有其他一些方法可以使这项工作也有效

$('product_composite_configure').down('.entry-edit .buttons-set.a-right .scalable').writeAttribute('test','test');

$$('#product_composite_configure .entry-edit .buttons-set.a-right .scalable')[0].writeAttribute('test','test');

这完全取决于您的 HTML 结构以及您想要的行为。如果您只打算定位一个元素，那么使用带有down() 的id 查找可能会更好。如果您要在 #product_composite_configure 元素中包含多个子元素，那么将 $$() 选择器与 invoke() 一起使用意味着任何新元素都会受到影响，而无需重写脚本。

Answer 2

为什么要把事情复杂化？试试这个：

var selectors = ["#product_composite_configure",".entry-edit",".buttons-set",".a-right",".scalable"];
selectors.forEach(function(e, i) {
   $$(e).each(function(elem) {
       elem.setAttribute("test","test");
   })
});