Jak mogę zaznaczyć wszystkie łącza do obrazów w Prototypie

Question

Jestem przyzwyczajony do jquery, ale muszę użyć ramy Prototype dla tego projektu. Mam listę obrazów (jpg, png i gif), z których niektóre są linkami do znacznika <a>. Muszę dodać atrybut rel tylko do tych tagów <a>, które są bezpośrednimi linkami do jpg, gif i png. Href nie ma podobnego stylu poza zakończeniem w .jpg, .png lub .gif. Mogę dodać rel do pojedynczego łącza z konkretnym href, ale nie mogę wymyślić, jak wybrać wszystkie takie linki. Przykładem powiązań, które muszą być manipulowane:

<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> 

i pożądany wynik:

<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> 

sobie wyobrazić, że ostateczny kod będzie wyglądać następująco:

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

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

    }); 
}); 
</script> 

ale nie może uzyskać symbolu wieloznacznego (*) do poprawnego działania. Jak używać symbolu wieloznacznego w prototypie?

Answer 1

Prototyp nie obsługuje znaków wieloznacznych, ale pozwala dopasować koniec wartości za pomocą $=attribute selector.

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