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

2022-01-22 00:00:00 append href jquery javascript

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

例如,我的列表中有以下链接:

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

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

解决方案

使用属性选择器:

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

选项:

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

查看 API 了解更多信息.

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?

For example I have the following links in my list:

  • Document1.pdf
  • Song1.mp3
  • Song2.m4a
  • Document2.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 pdf to the anchor element, and the link with the text Song1.mp3 I'd add the class mp3 to the anchor element.

解决方案

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 API for additional information.

相关文章