Question

I made an active state for my menu on a certain urls. I have urls like this:

• /products/other-clothing/sporting/adults-anzac-australia-polo
• /products/other-clothing/sporting/adults-nz-tee
• /products/bags/backpacks

My code gets the folder from after the / so other-clothing, sporting, etc.
It is working fine, I just assume there is a more efficient way to write the code.

Here is my code:

jQuery(".product-nav li a").each(function() {
  // URL url
  var cat = location.pathname.split("/")[2];
  var subcat = location.pathname.split("/")[3];
  var c = "/products/" + cat + "/" + subcat;

  // A tag url
  var acat = this.href.split("/")[4];
  var asubcat = this.href.split("/")[5];
  var e = "/products/" + acat + "/" + asubcat;

  if(e == c) {
    jQuery(this).parent().addClass("active");
    jQuery(this).parent().parent().parent().addClass("active");
  }
});

If anyone can provide a cleaner way of writing the code that’d be great. I probably dont need "/products/" +.

Answer 1

Here’s a brief whack at it:

jQuery(".product-nav li a").each(function() {
  // URL url
  var c = location.pathname.split('/').slice(2, 4)
  // A tag url
    , e = this.href.split('/').slice(4, 6)
  ;

  if(e[0] == c[0] && e[1] == c[1]) {
    jQuery(this).parentsUntil(
      'div:not(.subnav)', // go up the tree until the 1st div that isn't .subnav
      '.product-nav li, .subnav' // and only match these parents
    ).addClass('active');
  }
});

.parent().parent().parent()... has a pretty bad code smell to it but can’t be improved without a look at your markup. You should probably be using .closest() instead.