このクラスの最初のオカレンスだけを選択するにはどうすればよいですか？

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(); 
     } 
     }); 

私はあなたの横にあるボタンをクリックすると、各フィールドセット自体を非表示になります多段階モーダルを作成しようとしています。私が持っている問題は前のボタンです。私は、2番目のフィールドセットの前のボタンから最初のフィールドセットを選択することができません。

前のフィールドセットはどのように選択できますか？これは＃step-3でも追加で動作するはずです。

Answer 1

あなたは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(); 
}) 

を最初と最後の方法とpsudoセレクタを使用することができます

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