Question

好的，这是一个棘手的问题，而且我已经掌控了。我可以破解它，但我试图避免这种情况。

以下是我正在努力实现的视觉参考：

如果单击左侧导航栏中的“用户管理”链接，您将在中心区域看到内容更改，并且下方的选项卡名称和图标会发生变化。单击链接时，它会抓取该链接的类并将其应用于选项卡，该选项卡会更改其图标。一切都很好。但是如果你点击一个子链接我也需要它。例如，如果您在“用户管理”类别中单击“订阅者”，您还应该在选项卡中获取小人物图标。这是我目前的剧本：

$(document).on( 'click', 'nav a', function( event ) {  
event.preventDefault();
$("nav a").removeClass("active");
$(this).addClass("active");
$('#nav-tabs .ui-tabs-panel:visible').load(this.href);
$("#nav-tabs .ui-tabs-active a").text(this.text);
$('#nav-tabs .ui-tabs-active a').attr('class',
   function(i, c){
   return c.replace(/(^|\s)ui-icon-\S+/g, '');
   });
$("#nav-tabs .ui-tabs-active a").addClass(this.className);
$("#nav-tabs .ui-tabs-active a").attr("href",this.href);
});

我知道我可以给一个类别中的每个链接提供父链接的类名，但这似乎没必要。所以我试图找出如何找到最接近的“ui-icon- *”类并将其捕获。我不够聪明，无法弄清楚逻辑，但在这里可能会有人认为。

Answer 1

您可能想要使用closest jQuery函数：http://api.jquery.com/closest/

它将遍历dom树以找到符合条件的第一个元素。在你的情况下，它会是这样的。

$('nav a').click(function(e) {
  // This will return the <li class='category'>.
  var $category = $(this).closest('.category');
  // Get the link directly under the category.
  var $categoryLink = $category.find('> a');
  var categoryClass = $categoryLink.attr('class');
});

获取与特定条件匹配的最接近元素的类名，并应用于另一个元素

1 个答案: