JQuery ярлык, чтобы выбрать братьев и сестер родителей

Question

В данный момент я использую этот

$('body').on('click', '#edit_card .ui.menu a.item', function() { 
    tab = $(this).closest('.ui.tab.active'); 
    updateRelationshipsContentCard(tab); 
}); 

Чтобы попытаться выбрать активную вкладку при нажатии на тег, но он ничего не найдя, где моя ошибка?

<div class="ui pointing secondary menu"> 
    <a class="item" data-tab="1">1</a> 
    <a class="item active" data-tab="2">Pessoas</a> <- Clicked this 
</div> 
<div class="ui tab" data-tab="1"> 
    <div class="ui basic segment"> 
    </div> 
</div> 
<div class="ui tab active" data-tab="2"> <- Need to select this 
    <div class="ui basic segment"> 
    </div> 
</div> 

Я знаю, что с помощью

tab = $(this).parent().parent().children('.ui.tab.active'); 

работал, но я не могу понять, почему с помощью closest не

Answer 1

.closest() method будет пытаться выбрать любой предок элемент, соответствующий селектор, который предоставлен. Другими словами, он будет перемещаться по дереву DOM и искать предка или родительский элемент, который соответствует предоставленному селектору.

Это не работает в вашем случае, потому что .ui.tab.active не является предком щелкнутого элемента .item.

Если вы хотите использовать метод .closest(), вы можете использовать его, чтобы выбрать ближайший .ui.menu элемент, а затем оттуда выбрать родственный .ui.tab.active элемент:

$(this).closest('.ui.menu').siblings('.ui.tab.active') 

Основываясь на фрагменте кода, вы, вероятно, также выбрать ближайший #edit_card предка элемент, а затем использовать .find() для выбора активной вкладки:

$(this).closest('#edit_card').find('.ui.tab.active') 

..or поскольку .ui.menu элемент объявления Прям ая родитель, вы могли бы просто использовать .parent() и .siblings() методы вместе (предполагая, что разметка не изменяется):

$(this).parent().siblings('.ui.tab.active')