Trouver tous les liens d'image et ajouter une classe à ce

Question

Si j'ai un tas de liens vers une image comme ceci:

<a href="foo.png">foo.png</a> <a href="foo.jpg">foo.jpg</a> <a href="foo.gif">foo.gif</a> 

Comment puis-je trouver tout cela avec js, puis ajoutez une classe?

C'est ce que je pensais, mais cela n'a pas fonctionné:

$('a[href*=.png]').addClass('image-link'); 
$('a[href*=.jpg]').addClass('image-link'); 
$('a[href*=.gif]').addClass('image-link'); 

MISE À JOUR: Il y avait une faute de frappe dans mes js. Les travaux ci-dessus.

Answer 1

Votre première manière ciblée et juste le .png fonctionnait bien dans FF 3.5, votre chemin mise à jour semble fonctionner aussi.

$('<a href="foo.png">foo.png</a> <a href="foo.jpg">foo.jpg</a> <a href="foo.gif">foo.gif</a>').appendTo('body') 

$('a[href]').filter(function() { 
    return /(jpg|gif|png)$/.test($(this).attr('href')) 
}).addClass('image-link') 

alert($('.image-link').length) 

Vous êtes sûr de le faire sur DOM, et que vous ciblez les bonnes choses, pas de fautes de frappe?

$('<a href="foo.png">foo.png</a> <a href="foo.jpg">foo.jpg</a> <a href="foo.gif">foo.gif</a>').appendTo('body') 


$('a[href*=".png"]').addClass('image-link'); 
$('a[href*=".jpg"]').addClass('image-link'); 
$('a[href*=".gif"]').addClass('image-link'); 

alert($('.image-link').length) 

^ceci a alerté 3 pour moi aussi.

Mise à jour: sélecteur plus concis serait ..

$('a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]') 

Answer 2

Essayez quelque chose comme ceci (notez les guillemets simples autour .png):

$("a[href*='.png']").addClass("image-link"); 

Answer 3

Essayez ceci:

var aFileExts = new Array("png", "jpg", "fig"); 
for(aIndex in aFileExts) { 
    aFileExt = aFileExts[aIndex]; 
    $("a[href$='.".aFileExt."']").addClass("image-link"); 
}

Hope this helps.