javascript - How to select "a" tag has specific file type in href using jQuery? -
i targeting links contain various file types in jquery using:
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> ');
firstly, there way of reducing repetition? e.g.
jquery('a[href$=".pdf|.doc|.docx"])
and secondly, there way target different cases file extensions e.g. pdf
, pdf
, pdf
?
you can filter selected element using .filter()
. in filter function check extension using regex in 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>
note i
flag @ end of regex match case insensitive.
Comments
Post a Comment