用于选择父级兄弟姐妹的 JQuery 快捷方式

Question

At the moment I'm using this

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

To try to select the active tab when clicking the a tag, but it is not finding anything, where is my mistake?

<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>

I know that using

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

Worked, but I can't see why using closest wouldn't

Answer 1

The .closest() method will attempt to select any ancestor element that matches the selector that is provided. In other words, it will traverse up the DOM tree and search for an ancestor or parent element that matches the provided selector.

It wasn't working in your case because .ui.tab.active isn't an ancestor of the clicked .item element.

If you want to use the .closest() method, you could use it to select the closest .ui.menu element, and then from there select the sibling .ui.tab.active element:

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

Based on your code snippet, you could probably also select the closest #edit_card ancestor element and then use .find() to select the active tab:

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

..or since the .ui.menu element is a direct parent, you could merely use the .parent() and .siblings() methods together (assuming the markup doesn't change):

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