Home » Jquery » javascript – jQuery add class based on parent URL-Exceptionshub

javascript – jQuery add class based on parent URL-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

on my homepage, I currently have a jQuery that adds a class (in this case an underline) to the link element. This works great and is based on comparing the url (url/firstsubmenu) in the browser with the href of the link element.

However as soon as I go to a child of that link element (url/firstsubmenu/secondsubmenu), the class is gone. I have tried to split the url so that the jQuery always looks for the parent but I just can’t solve it. Can you help me?

Could it be solved by adding another code, like maybe “if (this).children().length > 0 ?”

Here is my jQuery:

var cururl = window.location.href;
cururl = cururl.split('#')[0];
jQuery("a.rs-layer").each(function(){
    if(jQuery(this).attr('href')=== cururl){
        jQuery(this).addClass("current-slider-menu");
    }
});

EDIT: I am new to this, and I have tried so many different codes, googled for hours. I now know that I can only write JavaScript in my CMS. That is, I cannot use jQuery operators such as, for example, $.

How to&Answer:

Try this,

Change the class/selectors as per your requirement. This will add a unique class in the li element, now you can style this using css.

$(document).ready(function() {
  $(".main_menu li").removeClass('current-slider-menu');
  $(".main_menu li>a").filter(function(){
    return  this.href == location.href.replace(/#.*/, "");
  }).parent("li").addClass("current-slider-menu");
});

Answer:

You’re definitely on the right track.

You can grab the currentURL (before the anchor #):

const currentURL = window.location.href.split('#')[0];

Then you can split the currentURL into its constituent folders:

const currentURLArray = currentURL.split('/');

Then, separately, you can grab all the myLinks:

const myLinks = [...document.querySelectorAll('a.rs-layer')];

And finally you can cycle through myLinks and if the name of the folder you want to match does match the name of the equivalent folder in the currentURL, then you can add the .current-slider-menu class:

for (myLink of myLinks) {

  if (myLink.href.split('/')[1] === currentURLArray[1]) {

    myLink.classList.add('current-slider-menu');
  }
}

Complete Example:

const currentURL = window.location.href.split('#')[0];

const currentURLArray = currentURL.split('/');

const myLinks = [...document.querySelectorAll('a.rs-layer')];

for (myLink of myLinks) {

  if (myLink.href.split('/')[1] === currentURLArray[1]) {

    myLink.classList.add('current-slider-menu');
  }
}

Answer:

EDITED

try this

  var cururl = window.location.href;
    jQuery("rs-layer[id|='"+cururl.split('/')[3]+"'] , .rs-layer[href='"+cururl+"']").each(function(){
           jQuery(this).addClass("current-slider-menu");
    });

Answer:

I solved it like this instead, skipping the whole idea with text-decoration.
I added an arrow. Finished.

JS:

var url = window.location.href;
  var msg = document.getElementById('current-menu-item-arrow');
  if( url.search( 'my-word' ) > 0 ) {
      msg.style.display = "block";
  }

CSS:

#current-menu-item-arrow {display:none;}