Jquery 如何仅选择该类的第一次出现？

我有这个标记

<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>

我试图创建一个多步骤模式，当您单击“下一步”按钮时，每个字段集都将隐藏自己。我遇到的问题是上一个按钮。我似乎无法从第二个字段集的上一个按钮中选择第一个字段集

如何选择上一个字段集？这也应该从步骤3开始工作。

将：first选择器与类选择器一起使用，如下所示

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

示例fiddle

您可以使用。first选择任何类的第一个元素，其中该类被分配给多个元素

---

查看使用手册

您可以在jquery中使用第一个和最后一个方法以及psudo选择器

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

---

尝试在jsor:eq0、.eq0、.first中使用：first选择器这应该很容易研究：first在我的情况下不起作用。如果我在第3步，按“上一步”并使用“第一步”只会使第1步重新出现，而不是第2步，因为第1步包含第一次出现。这可以正常工作，但有3个步骤。如果单击步骤3中的“上一步”按钮，这只会使步骤1重新出现。

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