CODEWITHSUNDEEP
javascriptjqueryhtml
markspl_
markspl_

Reputation: 38

jQuery Selectors and different kind of href links - adding correct CSS classes for links

I have a HTML file, which includes multiple different type of "a" tags with only href attribute.

The task is to add a correct CSS class for different "a" tags. For example, if link has a suffix .zip, it gets a CSS class "external". With suffix .pdf "a" tag gets a CSS class "pdf". Other external and internal links gets a CSS class "external".

It works correctly.. almost. The problem are links which doesn't have a clear suffix (".html", ".zip") or prefix ("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 -->

with a results:

As you can see, internal and external links which doesn't direct to files, gets a wrong CSS class because the last row in my code.

What I tried was pick a tags with $("a[href^='/']) but this didn't give any results.

Note: Link address can be anything, so I can't use selector to find a specific link by it's name. Also, which I didn't remember to write, downloadable file type can also be anything but file "pdf" has own class "pdf".

Upvotes: 0

Views: 54

Answers (2)

Stender
Stender

Reputation: 2492

This is a different approach - But basicaly does the same.

In this i go through each link, and checks if it contains your variables , PDF, Zip, EXE etc. you can add as many as you want - If it does not contain any of these, you add the external class

$(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 -->

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

For this to work most reliably you will need to detect the .pdf links and all the download links; which means you will need to maintain a list of all valid download file extensions. Anything which does not then meet either of these criteria will be an 'external' link.

You can then detect the file extensions using regular expressions in a function you provide to addClass(). The logic of that would look something like this:

$('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 -->

Upvotes: 1

Related Questions