ul 中的 append li 元素如何使用相同的 class 名稱列出？

Question

我怎樣才能 append 一個新的li元素放在右邊的ul上？ 每張卡片都有一個ul和一個form 。

當我提交表格 I append 時，在ul中添加一個新的li 。 每個ul包含.topics class。但是這個新的li被添加到所有卡片上。

我沒有在創建它的 ul 中找到 append 這個 li 的解決方案。

這是我的 HTML 結構

<div class="card" id="card1">
  <div class="card-body">
   <ul class="topics">
       <li>....</li>
       <li>....</li>
       <li>....</li>
   </ul>
  </div>
  <div class="card-footer">
      <form method="post" class="topic-form">
          ....
      </form>
  </div>
</div>

<div class="card" id="card2">
  <div class="card-body">
   <ul class="topics">
       <li>....</li>
       <li>....</li>
       <li>....</li>
   </ul>
  </div>
  <div class="card-footer">
      <form method="post" class="topic-form">
          ....
      </form>
  </div>
</div>

還有我的 JS 代碼

$('form.topic-form').submit( function (e) {
   e.preventDefault();
   var form = $(this)[0];
   $.ajax({
          ...ajax stuff...        
      },
      success: function (json) {
          form.reset();
          $(".topics").append('<li>.....</li>')
      }
   }
}

Answer 1

問題是這條線

$(".topics").append('<li>.....</li>')

...在沒有上下文的情況下行動，並在全球范圍內搜索。 您需要將其限制為與觸發事件的form相關的ul 。 最合乎邏輯的方法是找到離form最近的.card元素並從那里返回 go。

$(this).closest('.card').find('.topics').append('<li>.....</li>')

Answer 2

您需要指定您指的是哪個.topics 。 一般使用$(this) （或您的情況下的form ）來定位到正確的一個。

$(this).closest('.card').find('.topics')

Answer 3

首先在提交中引用您的表單$currentForm = $(this); 然后在 Ajax 中使用最后一個響應插入li

通過搜索父卡然后append進入找到主題如下：

$currentForm.parents(".card").find('.topics').append('<li>.....</li>');

並不是說parents()從第一個父元素開始搜索，當closest()從它自己的元素開始時，除了那個之外沒有這樣的差異。 所以你的 ajax 應該看起來像

$('form.topic-form').submit( function (e) {
      e.preventDefault();
      $currentForm = $(this);
      $.ajax({
            ...ajax stuff...        

       },
       success: function (json) {
            $currentForm.get(0).reset();
            // or $('form#myform').trigger("reset");
            $currentForm.parents(".card").find('.topics').append('<li>.....</li>');
      }
}

這是一個示例代碼段：

 $(function() { $('form.topic-form').submit(function(e) { e.preventDefault(); $currentForm = $(this); setTimeout(function() { let rand = Math.random().toString(36).replace(/[^az]+/g, '').substr(0, 5) $currentForm.get(0).reset(); $currentForm.parents(".card").find('.topics').append(`<li>${rand}</li>`); }, 1000); }); });

 .card { width:45%; display:inline-block; border:1px solid black; vertical-align:top; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="card" id="card1"> <div class="card-body"> <ul class="topics"> <li>FOO from1</li> </ul> </div> <div class="card-footer"> <form method="post" class="topic-form"> <button>add</button> </form> </div> </div> <div class="card" id="card2"> <div class="card-body"> <ul class="topics"> <li>BAR form2</li> </ul> </div> <div class="card-footer"> <form method="post" class="topic-form"> <button>add</button> </form> </div> </div>