$(this).next()的问题

Question

出于某种原因,只有保存按钮显示在编辑点击...不知道为什么我有取消按钮的问题...？以下是我的代码

$(".editlink").on("click", function(e){
    e.preventDefault();
      var dataset = $(this).prev(".datainfo");
      var savebtn = $(this).next(".savebtn");
      var cancelbtn = $(this).next(".cancelbtn");

      $(this).css("display", "none");
      cancelbtn.css("display", "block");
      savebtn.css("display", "block");     
});

这是我的整个HTML页面:

<div id="wrapper">
  <section id="core">
      <div class="profileinfo">

          <div class="gear">
              <label>Primary E-Mail:</label>
              <span id="email_address" class="datainfo"><?php echo $row['email_address'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>First Name:</label>
              <span id="first_name" class="datainfo"><?php echo $row['first_name'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>Last Name:</label>
              <span id="last_name" class="datainfo"><?php echo $row['last_name'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>About Me:</label>
              <span id="about_me" class="datainfo"><?php echo $row['about_me'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>Interests:</label>
              <span id="interests" class="datainfo"><?php echo $row['interests'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>
      </div>
  </section>

出于某种原因,我尝试的一切都没有奏效.我可以使用一个标签/字段,但是当我在html中有多个像上面这样的时候,取消按钮会显示出来.

Answer 1

next() 如jQuery文档中所述:

获取匹配元素集中每个元素的紧随其后的兄弟.如果提供了选择器,则仅当它与该选择器匹配时,它才会检索下一个兄弟.

尝试使用 siblings()