jQuery 选择器和不同类型的 href 链接 - 为链接添加正确的 CSS 类

Question

我有一个 HTML 文件，其中包含多个不同类型的“a”标签，只有 href 属性。

任务是为不同的“a”标签添加正确的 CSS 类。例如，如果链接有一个后缀 .zip，它会得到一个 CSS 类“外部”。带有后缀 .pdf 的“a”标签获得一个 CSS 类“pdf”。其他外部和内部链接获取 CSS 类“外部”。

它工作正常.. 几乎。问题在于没有明确后缀（“.html”、“.zip”）或前缀（“http://”、“www.”、“../”）的链接。

$(document).ready(function() {
  $("a[href$='.pdf']").addClass("pdf");
  $("a[href*='.htm'], a[href^='www.'], a[href^=http], a[href*='://']").addClass("external");
  $("a[href]").not("a[href$='.pdf']").not("a[href*='.htm']").not("a[href$='/']").not("a[href*='www']").addClass("download");
});

.pdf {
    font-weight:900;
    color: black;
}

.external {
    font-weight:900;
    color: green;
}

.download {
    font-weight:900;
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="www.google.com">google</a></li>
<!-- CLASS EXTERNAL -->
<li><a href="ticket.pdf">my flight ticket</a></li>
<!-- CLASS PDF -->
<li><a href="backup/2019.zip">my backup.zip</a></li>
<!-- CLASS DOWNLOAD -->
<li><a href="http://randommm.com/file.exe">download exe file</a></li>
<!-- CLASS DOWNLOAD -->
<li><a href="my/normal">my/normal</a></li>
<!-- CLASS EXTERNAL -->
<li><a href="/normal">/normal</a></li>
<!-- CLASS EXTERNAL -->
<li><a href="test.htm">test.htm</a></li>
<!-- CLASS EXTERNAL -->
<li><a href="mysite.com">mysite.com</a></li>
<!-- CLASS EXTERNAL -->
<li><a href="/mysite">/mysite</a></li>
<!-- CLASS EXTERNAL -->

结果：

如您所见，不指向文件的内部和外部链接会得到错误的 CSS 类，因为我的代码中的最后一行。

我尝试选择带有$("a[href^='/']) 的标签，但这没有给出任何结果。

注意：链接地址可以是任何东西，所以我不能使用选择器通过其名称来查找特定链接。 另外，我不记得写了，可下载的文件类型也可以是任何东西，但文件“pdf”有自己的类“pdf”。

Answer 1

为了使这个工作最可靠，您需要检测.pdf 链接和所有下载链接；这意味着您将需要维护所有有效下载文件扩展名的列表。任何不符合这些标准的任何内容都将成为“外部”链接。

然后，您可以在提供给addClass() 的函数中使用正则表达式检测文件扩展名。其逻辑如下所示：

$('a').addClass(function() {
  var href = $(this).attr('href');
  if (/\.pdf$/.test(href))
    return 'pdf';
    
  if (/(\.zip|\.exe)$/.test(href))
    return'download';
  
  return 'external';
});

.pdf { color: #C00; }
.download { color: #0C0; }
.external { color: #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="www.google.com">google</a></li> <!-- CLASS EXTERNAL -->
<li><a href="ticket.pdf">my flight ticket</a></li> <!-- CLASS PDF -->
<li><a href="backup/2019.zip">my backup.zip</a></li> <!-- CLASS DOWNLOAD -->
<li><a href="http://randommm.com/file.exe">download exe file</a></li> <!-- CLASS DOWNLOAD -->
<li><a href="my/normal">my/normal</a></li> <!-- CLASS EXTERNAL -->
<li><a href="/normal">/normal</a></li> <!-- CLASS EXTERNAL -->
<li><a href="test.htm">test.htm</a></li> <!-- CLASS EXTERNAL -->
<li><a href="mysite.com">mysite.com</a></li> <!-- CLASS EXTERNAL -->
<li><a href="/mysite">/mysite</a></li> <!-- CLASS EXTERNAL -->

Answer 2

这是一种不同的方法 - 但基本上是一样的。

在此我浏览每个链接，并检查它是否包含您的变量、PDF、Zip、EXE 等。您可以添加任意数量的变量 - 如果它不包含任何这些，则添加外部类

$(document).ready(function(){
	
  var allLinks = $("a[href]");
  allLinks.each(function( index ) {
    if ($(this).attr('href').indexOf(".pdf")  >= 0){
	$('a[href="'+$(this).attr('href')+'"]').addClass('pdf')
    } else if($(this).attr('href').indexOf(".zip")  >= 0 || $(this).attr('href').indexOf(".exe")  >= 0){
    	$('a[href="'+$(this).attr('href')+'"]').addClass('download');
    } else {
    	$('a[href="'+$(this).attr('href')+'"]').addClass('external');
    }
    console.log( index + ": " + $( this ).text() +" Class = "+$(this).attr('class') );
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="www.google.com">google</a></li> <!-- CLASS EXTERNAL -->
<li><a href="ticket.pdf">my flight ticket</a></li> <!-- CLASS PDF -->
<li><a href="backup/2019.zip">my backup.zip</a></li> <!-- CLASS DOWNLOAD -->
<li><a href="http://randommm.com/file.exe">download exe file</a></li> <!-- CLASS DOWNLOAD -->
<li><a href="my/normal">my/normal</a></li> <!-- CLASS EXTERNAL -->
<li><a href="/normal">/normal</a></li> <!-- CLASS EXTERNAL -->
<li><a href="test.htm">test.htm</a></li> <!-- CLASS EXTERNAL -->
<li><a href="mysite.com">mysite.com</a></li> <!-- CLASS EXTERNAL -->
<li><a href="/mysite">/mysite</a></li> <!-- CLASS EXTERNAL -->