獲取匹配特定條件的最接近的元素的類名並應用於其他元素

Question

好的，這是一個棘手的問題，而且我很頭痛。我可以破解它，但我試圖避免這種情況。

這裏是什麼，我試圖完成的視覺參考：

http://bit.ly/1vXUM6i

如果你點擊「用戶管理」，在左側導航欄中的鏈接，你會看到在內容變化中心區域以及標籤名稱和圖標在下面更改。當你點擊一個鏈接時，它會抓取該鏈接的類並將其應用到選項卡，這會更改它的圖標。這一切都很好。但是如果你點擊一個子鏈接，我也需要它來工作。因此，例如，如果您在「用戶管理」類別中單擊「訂戶」，則還應該在選項卡中顯示小人物圖標。這裏是我當前的腳本：

$(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'); 
});