jQuery thêm lớp vào href nếu liên kết chứa văn bản cụ thể

Question

Tôi có một số liên kết được điền động trong danh sách trên trang web của tôi liên kết đến tệp. Có thể sử dụng jQuery để xem tên của tệp có kết thúc bằng .pdf và thêm một lớp vào href hoặc tương tự nếu văn bản liên kết kết thúc bằng .mp3 không?

Ví dụ tôi có các liên kết sau đây trong danh sách của tôi:

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

tôi sẽ muốn phát hiện các chữ cái kết thúc và thêm các lớp khác nhau vào các liên kết, do đó, liên kết có văn bản Document1.pdf tôi sẽ thêm lớp pdf đến phần tử neo và liên kết với văn bản Song1.mp3 Tôi sẽ thêm lớp mp3 vào phần tử neo.

Answer 1

Sử dụng bộ chọn thuộc tính:

$('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 để biết thêm thông tin.

Answer 2

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

Answer 3

cho tất cả các liên kết như vậy bạn có lớp .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]); 
}) 

Mã này sẽ thêm phần mở rộng lớp cho tất cả các liên kết như vậy mà có phần mở rộng tập tin trong exts mảng.

Answer 4

Thay vì cứng mã hóa tất cả các loại, bạn cũng có thể tạo ra một giải pháp mà sẽ tự động làm điều này cho tất cả các liên kết của bạn:

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