Как я могу выбрать все ссылки на изображения в Prototype

Question

Я привык к jquery, но для этого проекта необходимо использовать структуру Prototype. У меня есть список изображений (jpg, png и gif), некоторые из которых связаны с тегом <a>. Мне нужно добавить атрибут rel только те теги <a>, которые являются прямыми ссылками на jpg, gif и png. У href нет аналогичного стиля, кроме как в .jpg, .png или .gif. Я могу добавить 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> 

Но я не может заставить шаблон (*) работать правильно. Как использовать шаблон в прототипе?

Answer 1

Прототип не поддерживает использование таких подстановочных знаков, но это позволяет согласовать конец значения с помощью $=attribute selector.

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