Как я могу выбрать только первое вхождение этого класса?

Question

У меня есть эта разметка.

<form> 
    <fieldset id="step-1"> 
    <!-- form code--> 
    <a class="previous"></a> 
    <a class="next"></a> 
    </fieldset> 

    <fieldset id="step-2"> 
    <!-- form code--> 
    <a class="previous"></a> 
    <a class="next"></a> 
    </fieldset> 

    <fieldset id="step-3"> 
    <!-- form code--> 
    <a class="previous"></a> 
    <a class="next"></a> 
    </fieldset> 

</form> 

Мой JQuery

 $('.previous').on('click', function(evr) { 
     evr.preventDefault(); 
     if ($(this).closest('fieldset').not('#step-1')){ 
      $(this).parent('fieldset').slideUp(function(){ 
      $(this).prev('fieldset').slideDown(); // this doesn't work 
      }); 
     } 
     }); 
     $('.next').on('click', function(e){ 
     e.preventDefault(); 
     if ($(this).closest('fieldset').not('#step-3')){ 
      $(this).closest('fieldset').slideUp(); 
      $(this).closest('fieldset').next('fieldset').slideDown(); 
     } 
     else if ($(this).closest('fieldset').is('#step-3')) { 
      $('#step-3').slideUp(); 
     } 
     }); 

Я пытаюсь создать многоступенчатую модальность, где каждый FIELDSET будет скрывать себя при нажатии на кнопку Далее. Проблема, с которой я столкнулась, - это предыдущая кнопка. Кажется, я не могу выбрать первый набор полей из предыдущей кнопки второго поля.

Как выбрать предыдущий набор полей? Это также должно работать с # step-3.

Answer 1

Вы можете использовать первый и последний метод и селектор psudo в JQuery

$('.previous').not(':first').on('click', function(e) { 
    e.preventDefault(); 
    $(this).parent('fieldset').slideUp(function(){ 
     $(this).prev('fieldset').slideDown(); // this doesn't work 
    }); 

    }); 
    $('.next').not(':last').on('click', function(e){ 
     e.preventDefault(); 
     $(this).closest('fieldset').slideUp(); 
     $(this).closest('fieldset').next('fieldset').slideDown(); 
    }); 

$('.previous:first').click(function(e){ 
    console.log('first prev clicked'); 
}); 
$('.next:last').click(function(e){ 
    console.log('last next clicked'); 
    $('fieldset:last').slideUp(); 
}) 

Answer 2

Используйте селектор :first с селектором класса, как, как следует

$('.previous:first').on('click', function(evr) { 
    alert("first"); 
}); 
$('.next:first').on('click', function(e){ 
    alert("nfirst"); 
}); 

Пример скрипку https://jsfiddle.net/x3x0dr2x/

Answer 3

Вы можете использовать .first() для выбора первого элемента любого класса, где класс присваивается несколько элементов ,

Проверьте руководство по использованию here