如何使用jQuery查找父元素的兄弟元素。

Question

在我的情况中，我有两个HTML元素被另一个元素（祖先）覆盖，就像这样：

 <div class="tabs">
  <ul class="header">
    <li> <a> </a> </li>
  </ul>
  <div class="content show"> </div>
  </div>

在这里，tabs 是父级元素，header 和 show 是它的子元素。我的问题是，当点击 <a> 元素时，需要去掉 header 的同级元素 show 的 class 属性。

我尝试使用了 closest() 方法，但并没有起到帮助。这是我的尝试：demo

$(this).closest('content').removeClass('show');

我需要你的帮助

编者注: (在jsfiddle中的标记)

<div class="tabs">
    <ul class="tabheader">
        <li class="active"><a href="#fragment-1"><span>FAQs</span></a>
        </li>
        <li><a href="#fragment-2"><span>Credit bundle</span></a>
        </li>
        <li><a href="#fragment-3"><span>Delivery & turnaround times</span></a>
        </li>
        <li><a href="#fragment-4"><span>Testimonials</span></a>
        </li>
    </ul>
    <div class="clearfix"></div>
    <div id="fragment-1" class="tabed_contents show">adasdasd</div>
    <div id="fragment-2" class="tabed_contents">adasdasd</div>
    <div id="fragment-3" class="tabed_contents">adasdasd</div>
    <div id="fragment-4" class="tabed_contents">adasdasd</div>
</div>

- user1999510

---

请注意，$(this).closest('content').removeClass('show'); 中缺少一个 .。 - Sergio

那么Rory写的第一个替代方案应该可以工作：$(this).closest('.tabs').find('.tabed_contents ').removeClass('show'); - Sergio

@Sergio 在同一页中有两个选项卡导航。在这里，我使用了“show”类。它的作用是在加载页面时应显示选项卡菜单的第一个内容。现在的问题是，在同一页中有多个选项卡菜单时，查看第一个菜单时，其他菜单的“show”类也会被移除.. :( - user1999510

啊哈... 你是指这个：http://jsfiddle.net/hwrK6/。 - Sergio

好的，很棒！请接受Rory的答案。我已经在那里添加了那些信息。 - Sergio

Answer 1

首先，你需要在类选择器中使用前缀.。但是，你现在寻找的是父级.content元素，但它实际上是父级的同级元素，因此无法找到。

尝试这样做：

$(this).closest('.tabs').find('.tabed_contents').removeClass('show');

或者，您可以转到 .header 并找到相邻的 .content。

$(this).closest('.header').siblings('.tabed_contents').removeClass('show');

为了不隐藏所有的.tabed_contents，请使用以下代码：

$(this).closest('.tabs').find('.tabed_contents').hide();

Fiddle

- Rory McCrossan

---

好的兄弟，让我给你点个赞 :) 很久没见到你了，真不错！ - Tats_innit

我说+1。OP在jsfiddle中有另一个标记，我刚刚更新了。也许是.tabed_contents而不是content。 - Sergio

@RoryMcCrossan 它会删除同一页上所有的“class”显示，我该如何防止它.. http://jsfiddle.net/VkranthVivek/69z5B/44/ - user1999510

添加了一些东西，希望没问题！ - Sergio

Answer 2

尝试一下这个：

$( this ).parent().parent().siblings(".content").removeClass('show');

- Abhishek Punj