Javascript 将url文件夹与标记href匹配，使其处于活动状态

我在某个URL上为我的菜单设置了活动状态。我有如下URL：

• /产品/其他服装/运动/成人anzac澳大利亚马球

• /产品/其他服装/运动/成人新西兰T恤

• /产品/包/背包

我的代码从

/

之后的文件夹中获取其他服装、运动等。 它工作得很好，我只是假设有一种更有效的方法来编写代码

这是我的密码：

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");
  }
});

---

如果有人能提供一种更简洁的代码编写方法，那就太好了。我可能不需要

“/products/”+

这里有一个简单的例子：

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（）。您可能应该改用它。
这里有一个简单的例子：

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（）。您可能应该改为使用。
有趣的问题。以下是我清理它的尝试：

jQuery(function ($) {
  function Category(outer, inner) {
    this.outer = outer
    this.inner = inner
  }

  Category.fromURL = function (url) {
    var parts = url.replace(/^(https?:\/\/.*?)?\//, "").split("/")

    return new Category(parts[1], parts[2])
  }

  Category.prototype.equals = function (other) {
    return this.outer === other.outer
      && this.inner === other.inner
  }

  var category = Subcategory.fromURL(location.href)

  $(".product-nav a").each(function () {
    if (Category.fromURL(this.href).equals(category)) {
      $(this).closest("li.inner").addClass("active")
      $(this).closest("li.outer").addClass("active")
    }
  })
})

有趣的问题。以下是我清理它的尝试：

jQuery(function ($) {
  function Category(outer, inner) {
    this.outer = outer
    this.inner = inner
  }

  Category.fromURL = function (url) {
    var parts = url.replace(/^(https?:\/\/.*?)?\//, "").split("/")

    return new Category(parts[1], parts[2])
  }

  Category.prototype.equals = function (other) {
    return this.outer === other.outer
      && this.inner === other.inner
  }

  var category = Subcategory.fromURL(location.href)

  $(".product-nav a").each(function () {
    if (Category.fromURL(this.href).equals(category)) {
      $(this).closest("li.inner").addClass("active")
      $(this).closest("li.outer").addClass("active")
    }
  })
})

请注意以下表达式的输出：

$('<a href="/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state"></a>')[0].href;
/*
 * http://stackoverflow.com/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state
 */
$('<a href="/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state"></a>').eq(0).attr('href');
/*
 * /questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state
 */

请注意以下表达式的输出：

$('<a href="/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state"></a>')[0].href;
/*
 * http://stackoverflow.com/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state
 */
$('<a href="/questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state"></a>').eq(0).attr('href');
/*
 * /questions/7564539/match-url-folders-with-a-tag-href-to-make-a-active-state
 */

你不能像那样比较数组！：）没错，丹尼尔。当你发表评论时，我正在修复它这可能看起来更好、更短，感谢您的输入，我明天将尝试实现它：-）这是有问题的网站：
http://qtco.businesscatalyst.com/products/other-clothing/fashion-and-casual-wear
@Luke:我已经更新了我的答案。事实证明，
.parents（）
或
.parentsUntil（）
（对于偏执狂）是最合适的，因为
.closest（）
只返回第一个匹配项，我们希望匹配两个元素。希望对你有帮助！你不能像那样比较数组！：）没错，丹尼尔。当你发表评论时，我正在修复它这可能看起来更好、更短，感谢您的输入，我明天将尝试实现它：-）这是有问题的网站：
http://qtco.businesscatalyst.com/products/other-clothing/fashion-and-casual-wear
@Luke:我已经更新了我的答案。事实证明，
.parents（）
或
.parentsUntil（）
（对于偏执狂）是最合适的，因为
.closest（）
只返回第一个匹配项，我们希望匹配两个元素。希望对你有帮助！