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"]')

Answer 2

尝试这样的事情（注意.png周围的单引号）：

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

Answer 3

试试这个：

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

希望这有帮助。

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

3 个答案: