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

..或者由于.ui.menu元素是直接父级，因此您只能同时使用.parent()和.siblings()方法（假设标记没有更改）：< / p>

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

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

1 个答案: