如何选择Prototype中图像的所有链接

时间:2010-11-18 00:01:17

标签: javascript prototypejs css-selectors wildcard

我习惯于jquery,但是需要为这个项目使用Prototype框架。我有一个图像列表(jpg,png和gif),其中一些是与<a>标签的链接。我只需要将一个rel属性添加到那些直接链接到jpg,gif和png的<a>标记。除了以.jpg,.png或.gif结尾之外,href没有类似的风格。我可以将rel添加到具有特定href的单个链接,但我无法弄清楚如何选择所有这些链接。需要操作的链接示例:

<a href="images/01.jpg"><img src="images/01.jpg" width="500" /></a>
<br>
<a href="http://www.example.com/"><img src="images/02.jpg" width="500"></a>
<br>
<a href="images/03.png"><img src="images/03.png" width="500" /></a>
<br>
<img src="images/04.jpg" width="500">
<br>

期望的结果:

<a href="images/01.jpg" rel="whatever"><img src="images/01.jpg" width="500" /></a>
<br>
<a href="http://www.example.com/"><img src="images/02.jpg" width="500"></a>
<br>
<a href="images/03.png" rel="whatever"><img src="images/03.png" width="500" /></a>
<br>
<img src="images/04.jpg" width="500">
<br>

我想最终的代码看起来像是:

<script type="text/javascript">
Event.observe(window, 'load', function() {
    $$('a[href="*.jpg","*.png"]').each(function(link){

            link.writeAttribute('rel','whatever');

    });
});
</script>

但我不能让通配符(*)正常工作。如何在原型中使用通配符?

1 个答案:

答案 0 :(得分:9)

Prototype不支持使用这样的通配符,但它允许使用$= attribute selector匹配值的结尾。

$$('a[href$=.jpg], a[href$=.png], a[href$=.gif]').each(function(link){