Как выбрать все ссылки на изображения в Prototype - PullRequest
Новая
       17

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

6 голосов
/ 18 ноября 2010

Я привык к 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>

Но я не могу заставить подстановочный знак (*) работать должным образом. Как использовать подстановочный знак в прототипе?

1 Ответ

9 голосов
/ 18 ноября 2010

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

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