JQuery добавить и удалить дочерние классы

Question

Я пытаюсь показать X рядом с вкладкой на моей странице при нажатии на вкладку, и у меня возникают проблемы с отображением и скрытием 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> 

Есть ли способ, чтобы добавить X с подобно removeClass('hidden'), когда на ссылку нажимается тег LI?

Answer 1

Вы можете использовать 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

Answer 2

Вы можете попробовать использовать .next("span") целевой на следующий A «S элемент (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() позволяет (один хороший день) изменить внутренний HTML из LI и до сих пор получите это span, даже если это не .next() щелкнув элемент.