如果链接包含特定文本，则jQuery将类添加到href

Posted 2023-03-11

【中文标题】如果链接包含特定文本，则jQuery将类添加到href

【英文标题】：jQuery add class to href if link contains specific text

【发布时间】：2013-03-30 12:52:51

【问题描述】：

我的网站列表中有一些动态填充的链接，它们链接到文件。是否可以使用 jQuery 来查看文件名是否以 .pdf 结尾，如果链接文本以 .mp3 结尾，是否可以在 href 或类似内容中添加一个类？

例如，我的列表中有以下链接：

Document1.pdf 歌曲1.mp3 Song2.m4a Document2.doc

我想检测结尾字母并向链接添加不同的类，因此对于具有文本 Document1.pdf 的链接，我将类 pdf 添加到锚元素，并添加带有文本的链接Song1.mp3 我将类 mp3 添加到锚元素。

【参考方案1】：

使用属性选择器：

$('a[href$=".mp3"]')...

选项：

属性包含前缀选择器 [name|="value"] 选择具有指定属性和值的元素 等于给定字符串或以该字符串开头 用连字符 (-)。 属性包含选择器 [name*="value"] 选择具有指定属性的元素 包含给定子字符串的值。 属性包含单词选择器 [name~="value"] 选择具有指定属性和值的元素 包含给定的单词，由空格分隔。 属性以选择器 [name$="value"] 结尾 选择具有指定属性的元素 以给定字符串结尾的值。比较区分大小写。 属性等于选择器 [name="value"] 选择具有指定属性的元素 值完全等于某个值。 属性不等于选择器 [name!="value"] 选择不具有指定属性的元素， 或者确实具有指定的属性但没有特定的值。 属性以选择器 [name^="value"] 开头 选择具有指定属性的元素 值正好以给定的字符串开头。 具有属性选择器 [名称] 选择具有指定属性且具有任何值的元素。 多属性选择器 [name="value"][name2="value2"] 匹配与所有指定属性过滤器匹配的元素。

Check out the API 了解更多信息。

【参考方案2】：

鉴于您的所有此类链接都有 .file 类

var exts = ['pdf','xls'];
$('a.file').each(function()
    if($(this).attr('href').match(new RegExp('('+exts.join('|')+')'), 'gi'))
        $(this).addClass($(this).attr('href').match(/\w3$/gi)[0]);
)

此代码会将 extension 类添加到所有在exts 数组中具有文件扩展名的此类链接。

【参考方案3】：

除了对所有类型进行硬编码之外，您还可以制定一个自动为所有链接执行此操作的解决方案：

var regex = "/\..3,4$/";
$('a').each(function() 
    $(this).addClass(regex.match($(this).attr("href"))[0]
);

【参考方案4】：

$('a[href$=".mp3"]').addClass("mp3");
$('a[href$=".pdf"]').addClass("pdf");

【讨论】：

呃，也许第二个应该说

$('a[href$=".pdf"]').addClass("pdf");