javascript - JQuery 快捷方式选择父级的 sibling

Question

目前我正在使用这个

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

尝试在单击 a 标签时选择事件选项卡，但没有找到任何内容，我的错误在哪里？

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

..或者由于 .ui.menu 元素是直接父元素，因此您只需使用 .parent() 和 .siblings() 方法在一起(假设标记没有改变):

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