如何使用jQuery在href中选择具有特定文件类型的“a”标签？答案

【问题标题】：How to select "a" tag has specific file type in href using jQuery?如何使用jQuery在href中选择具有特定文件类型的“a”标签？
【发布时间】：2017-03-22 01:00:26
【问题描述】：

我的目标是包含 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?

【问题讨论】：

标签： javascript jquery anchor href selector

【解决方案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");

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="file.pdf">pdf</a>
<a href="file.doc">doc</a>
<a href="file.html">html</a>
<a href="file.docx">docx</a>
<a href="file.ppt">ppt</a>
<a href="file.php">php</a>
<a href="file.slxs">slxs</a>
<a href="file.txt">txt</a>

请注意，正则表达式末尾的 i 标志不区分大小写。

【讨论】：

非常感谢。 /\.在正则表达式目标中只有文件扩展名？
@user2726041 不，在 javascript 正则表达式中应该设置在 // 之间。还有\. 匹配点。

【解决方案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'))

如果您需要支持特殊字符，则必须添加一些转义

【讨论】：

【解决方案3】：

我在使用“.attr()”时遇到了一些问题。浏览器会返回“TypeError: $(...).attr(...)”，所以经过一番研究，我发现如果我将“.attr()”替换为“.prop()”，它可以解决问题。

以下是关于两者的一些解释：.prop() vs .attr()

感谢您的功能。

【讨论】：