Question

我试图在单击选项卡时在页面上的选项卡旁边显示一个X，并且我在显示和隐藏选项卡之间的问题时遇到问题。我从中获取父标签。

$('.tabs .tab-links a').on('click', function(e) {
    var currentValue = $(this).parent('li')
});

我的问题是我在LI中有一个跨度，我似乎无法访问其中包含X的跨度

<div class="tabs">
  <ul class="tab-links">
    <li>
      <a href="#tab1">Official Rules</a>
        <span class="close hidden">X</span>
    </li>
    <li>
      <a href="#tab2">Privacy Policy</a>
      <span class="close hidden">x</span>
    </li>
    <li>
      <a href="#tab3">Support</a>
      <span class="close hidden">X</span>
    </li>
  </ul>
</div>

当在LI标签中点击链接时，有没有办法像removeClass('hidden')那样添加X？

Answer 1

您可以尝试使用.next("span")定位下一个A元素（SPAN）
但最好的方式首先引用父级，然后找到所需的选择器：

.closest("li").find("span")

在你的例子中

：

$('.tabs .tab-links a').on('click', function(e) {
    var $span = $(this).closest('li').find("span");
    $span.toggleClass("hidden"); // OR whatever you want to do with $span
});

因此.closest()首先允许您（一个美好的一天）更改LI的内部HTML并仍然获得span，即使它已不再存在.next()到点击的元素。

Answer 2

您可以使用jQuery的siblings并删除元素的类

$('.tabs .tab-links a').on('click', function(e) {
    $(this).parents("ul").find("span").addClass("hidden");
   $(this).siblings("span").toggleClass("hidden");

});

Check JS fiddle

检查更新的JS fiddle

Jquery添加和删除子类

2 个答案: