如何用jQuery仅定位带.publications类的#flexTab下的tab-1？

需求 #

网站存在两组标签组件，需避免误操作另一组，要求用jQuery仅在#flexTab元素带有.publications类时，定位其中的.tab-1标签。

错误写法分析 #

1. $("#flexTab .publications .tab-1").click(function() {

   • 错误原因：该选择器逻辑是找#flexTab的后代中带.publications类的元素，再在其下找.tab-1。但实际.publications是#flexTab自身的类，并非后代元素的类，因此匹配不到目标元素。

2. $("#flexTab, .publications, .tab-1").click(function() {

   • 错误原因：逗号代表同时选择多个独立元素，这个选择器会选中#flexTab元素、所有带.publications类的元素、所有带.tab-1的元素，范围太广，会误触其他标签组的元素，不符合需求。

正确写法 #

$("#flexTab.publications .tab-1").click(function() {
    // 此处编写点击逻辑
});

原理说明 #

• #flexTab.publications：表示同时拥有id="flexTab"和class="publications"的元素，精准锁定目标容器。
• 空格加.tab-1：表示查找该容器下的后代元素中带.tab-1类的标签，对应HTML结构里的<a class="nav-link text-center tab-1 active"...>元素，不会影响其他标签组。

内容的提问来源于stack exchange，提问作者MrFox