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

jQuery add class to href if link contains specific text

提问by Sam Skirrow

I have some dynamically populated links in a list on my site that link to files. Is it possible to use jQuery to see if the name of the file ends with .pdf and add a class to the href or similar if the link text ends with .mp3?

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

For example I have the following links in my list:

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

• Document1.pdf
• Song1.mp3
• Song2.m4a
• Document2.doc

• 文档1.pdf
• 歌曲1.mp3
• 歌曲2.m4a
• 文档2.doc

I would like to detect the end letters and add different classes to the links, so to the link which has the text Document1.pdf I'd add the class pdfto the anchor element, and the link with the text Song1.mp3 I'd add the class mp3to the anchor element.

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

回答by James Hill

Use the attribute selector:

使用属性选择器：

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

Options:

选项：

    Attribute Contains Prefix Selector [name|="value"]
    Selects elements that have the specified attribute with a value 
    either equal to a given string or starting with that string followed 
    by a hyphen (-).

    Attribute Contains Selector [name*="value"]
    Selects elements that have the specified attribute with a 
    value containing the a given substring.

    Attribute Contains Word Selector [name~="value"]
    Selects elements that have the specified attribute with a value
    containing a given word, delimited by spaces.

    Attribute Ends With Selector [name$="value"]
    Selects elements that have the specified attribute with a 
    value ending exactly with a given string. The comparison is case sensitive.

    Attribute Equals Selector [name="value"]
    Selects elements that have the specified attribute with a 
    value exactly equal to a certain value.

    Attribute Not Equal Selector [name!="value"]
    Select elements that either don't have the specified attribute, 
    or do have the specified attribute but not with a certain value.

    Attribute Starts With Selector [name^="value"]
    Selects elements that have the specified attribute with a 
    value beginning exactly with a given string.

    Has Attribute Selector [name]
    Selects elements that have the specified attribute, with any value.

    Multiple Attribute Selector [name="value"][name2="value2"]
    Matches elements that match all of the specified attribute filters.

Check out the APIfor additional information.

查看 API以获取更多信息。

回答by Ejaz

given your all such links have class .file

鉴于您的所有此类链接都有课程 .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(/\w{3}$/gi)[0]);
})

This code will add the extensionclass to all such links that have file extension in extsarray.

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

回答by MarioDS

Rather than hard coding all the types, you can also make a solution that will automatically do this for all your links:

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

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

回答by Aioros

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