找到所有图像链接并为其添加一个类

Question

如果我有一堆链接到这样的图像:

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

我如何用js找到它然后添加一个类？

这是我在想的但是没有用:

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

更新:我的js中有一个拼写错误.以上工作.

Answer 1

你的第一种方式只针对png并在FF 3.5中运行良好,你的更新方式似乎也有效.

$('<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 )

你确定你准备好在DOM上做这个,并且你正在针对正确的东西,没有错别字？

$('<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 )

^这也为我提醒了3.

更新:更简洁的选择器将是..

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