jquery - показать, где нет класса

Question

Как показать следующий элемент, который НЕ содержит класс ".hidden"?

JQUERY

$(document).on("click", ".btn_next", function(e){

    // SHOW NEXT SECTION
    $(this).parents('.form_section').next().show();

    e.preventDefault();

}); 

HTML

<div class="form_section">CONTENT HERE 1 <a class="btn_next">NEXT</a></div>
<div class="form_section hidden" style="display: none">CONTENT HERE 2 <a class="btn_next">NEXT</a></div>
<div class="form_section" style="display: none">CONTENT HERE 3 <a class="btn_next">NEXT</a></div>
<div class="form_section hidden" style="display: none">CONTENT HERE 3 <a class="btn_next">NEXT</a></div>

Answer 1

Вы можете сделать это следующим образом: siblings(':not(.hidden)') выбирает всех братьев и сестер, которые не имеют класса hidden, а first() выбирает первого из этих братьев и сестер.

$(document).on("click", ".btn_next", function(e) {
  e.preventDefault();
  $(this).parents('.form_section').siblings(':not(.hidden)').first().show();
});

Для справки: jQuery не () , jQuery братьев и сестер () , jQuery первый () и рабочий Fiddle .

Answer 2

Вы можете сделать это с помощью приведенного ниже кода:

$(this).parents('.form_section').not('.hidden').show();

Это получит ваш родительский элемент с указанным именем, и в нем будет найден элемент, который не имеет hidden класса.