jQuery：限制jQuery选择器的范围以避免选择其他非子选择器

我用jQuery制作了一个内容屏蔽（即标签）。而且它工作得很好

我知道我想在页面上放置第二个，然后将它们都包装在一个更大的内容屏蔽中。但是，当您单击第一个链接时，它将开始影响第二个链接

这是我的HTML的概述

<div class="taptabs pages">
  <nav class="content-follower tapnav ui-ticklist cr-nav"> [UL NAVIGATION TO SWITCH BETWEEN CONTENT SHIELD 1 & 2] </nav>
  <div class="taptabs page">
    <nav class="content-follower tapnav ui-ticklist cr-nav"> [UL TABS FOR CONTENT SHEILD 1]
      </ul>
    </nav>
    <div class="pages">
      <div class="page">
        CONTENT SHEILD 1 - Section a
      </div>
      <div class="page">
        CONTENT SHEILD 1 - Section b
      </div>
    </div>
  </div>
  <div class="taptabs page">
    <nav class="content-follower tapnav ui-ticklist cr-nav"> [UL TABS FOR CONTENT SHEILD 2]
      </ul>
    </nav>
    <div class="pages">
      <div class="page">
        CONTENT SHEILD 2 - Section a
      </div>
      <div class="page">
        CONTENT SHEILD 2 - Section b
      </div>
    </div>
  </div>
</div>

显然，问题在于taptabs/tapnav类并不特定于每个部分。

---

我想我可以使用或来限制选择器，但我不确定如何将其集成到代码中，因此导航只选择自己部分中的页面。

您需要在初始jQuery选择器中更加具体。使用CSS表示法，您可以使用“>”（大于号）来指定您只查找直接子级

(function ($) {
    $(document).ready(function () {
        $(document).on('click', ".taptabs > .tapnav > ul > li", function () {
            $(".page").hide().eq($(this).index()).show().addClass("animated").addClass("fadeInLeft");
        }).eq(0).addClass('selected');
    });
})(jQuery);

---

编辑：我以前使用.live与原始海报保持一致，但是.live被弃用，取而代之的是.on（），因此我相应地更改了此答案

您可以尝试此方法。在单击事件中，您将获得正确的父级并使用它筛选.page选择器

$(".taptabs .tapnav li").on('click', function()
        {
            taptab = $(this).parents(".taptabs").get(0);

            $(".page",taptab).hide().eq($(this).index()).show().addClass("animated").addClass("fadeInLeft");
        }).eq(0).addClass('selected');

        });

---

使用子选择器

E>F

而不是子选择器

E F

您的结构不一致。内页有一个“pages”包装器，但外页没有。请快速查看。但实际上，Šime Vidas有两个正确的地方：live已被弃用，您的HTML结构应该更一致。

”.taptab>.tapnav>ul>li“

-这些类型的长选择器相对较慢。改用短选择器。另外，

.live（）

已被弃用。

$（“.page”）

选择器仍然过于通用。

$(".taptabs .tapnav li").on('click', function()
        {
            taptab = $(this).parents(".taptabs").get(0);

            $(".page",taptab).hide().eq($(this).index()).show().addClass("animated").addClass("fadeInLeft");
        }).eq(0).addClass('selected');

        });