Как выбрать тег «a» имеет определенный тип файла в href с помощью jQuery?

Question

Я нацеливание ссылки, которые содержат различные типы файлов в JQuery с помощью:

jQuery('a[href$=".pdf"], a[href$=".doc"], a[href$=".docx"], a[href$=".ppt"], a[href$=".pptx"], a[href$=".xls"], a[href$=".slxs"], a[href$=".epub"], a[href$=".odp"], a[href$=".ods"], a[href$=".txt"], a[href$=".rtf"]').before('<span class="glyphicon glyphicon-file"></span> '); 

Во-первых, есть способ уменьшить повторение? например

jQuery('a[href$=".pdf|.doc|.docx"]) 

И, во-вторых, есть ли способ нацеливать различные случаи на расширения файлов, например. Pdf, PDF и pdf?

Answer 1

Вы можете отфильтровать выбранный элемент, используя .filter(). В функции проверки функции фильтра с использованием регулярного выражения в String.prototype.match().

$("a").filter(function(){ 
    return $(this).attr("href").match(/\.(pdf|doc|docx|ppt|pptx|xls|slxs|epub|odp|ods|txt|rtf)$/i); 
}).before("Some html"); 

Обратите внимание, что i флага в конце матча регулярного выражения чувствительны к регистру.

Answer 2

Не просто использование CSS, но вы можете создать custom selector.

jQuery.expr[':'].hrefEndsWith = function(
     objNode, 
     intStackIndex, 
     arrProperties, 
     arrNodeStack 
     ){ 
     // The list of arguments gets passed as a string - 
     var arrArguments = arrProperties.split(','); 
     // Create a jQuery version of this node. 
     var jThis = $(objNode); 
     // Check to see if this node ends with (we only need to find 
     // one of the titles to qualify). 
     for (var i = 0 ; i < arrArguments.length ; i++){ 
      // Check for title equality. 
      if (jThis.attr("href").endsWith(arrArguments[i])){ 
       // We found a href match, return true to 
       // indicate that this node should be included 
       // in the returned jQuery stack. 
       return true ; 
      } 
     } 
     // If we have made it this far, then we found no 
     // match. Return false to indicate that this node 
     // did not match our selector. 
     return false ; 
    } 

    // Use it 
    jQuery("a:hrefEndsWith('.pdf', '.txt', '.xls')"); 

Если вам не нужно все, что вы могли бы просто написать JS-функцию, чтобы создать селектор.

function getEndsWithSelector(names) { 
    return names.map(n => 'a[href$=".'+name+'"]').join(); 
} 

jQuery(getEndsWithSelector('pdf', 'txt', 'xls')) 

Вы должны добавить некоторые избежать, если вам необходимо поддерживать специальные символы