Jquery: add a css class to specific html element by examining the URL

Question

If I have 4 possible urls ending as shown:

   /users/username/bad
   /users/username/average
   /users/username/good
   /users/username/great

Is there a way to add a class to an element depending on the ending of the URL when a page loads?

So when /users/username/bad loads the element div#bad is given the css class .highlight. And when /users/username/good loads the element div#good is given the css class .highlight, so on and so forth for all 4 URLs.

If this possible through query? Thank you

Answer 1

Just split the url on / and take the last element using slice

$(function(){
   $('div#' + location.pathname.split('/').slice(-1)).addClass('highlight'); 
});

Answer 2

Yes.

var token3 = window.location.pathname.split('/')[3];
$('div#'+token3).addClass('highlight');