如何在具有相同类名的 ul 列表中附加 li 元素？答案

【问题标题】：How append li element inside a ul lists with the same class name?如何在具有相同类名的 ul 列表中附加 li 元素？
【发布时间】：2021-04-18 19:07:32
【问题描述】：

如何在右侧ul 上附加一个新的li 元素？每张卡片都有一个ul 和一个form。

当我提交表单时，我在ul 中附加了一个新的li。每个ul 都包含.topics 类。但是这个新的li 正在添加到所有卡片中。

我没有找到将这个 li 附加到创建它的 ul 中的解决方案。

这是我的 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>')
      }
   }
}

【问题讨论】：

标签： javascript html jquery css css-selectors

【解决方案1】：

您需要指定您的意思是哪个.topics。一般使用$(this)（或在您的情况下使用form）来定位到正确的一个。

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

【讨论】：

请记住form不是一个jQuery集合而是一个DOM元素。
@PeterKA 是对的，所以 find 函数会报错
@ItaloLemos：我先有$(this)，然后我改成了form，因为我看到了你的声明form = $(this)[0]——我的意思是有一个jQuery对象。如果不是，那是我的错 :-) 我已经返回 $(this) 我的答案的第一个变体是什么...
@pavel Tha 说得对，我现在检查了一下，我的声明不正确，form = $(this)[0] 返回的是 JS 对象而不是 jQuery，所以我改成了 form = $(这）和作品！我的坏

【解决方案2】：

问题出在这一行

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

...在没有上下文的情况下进行操作，并在全球范围内搜索。您需要将其限制为与触发事件的form 相关的ul。最合乎逻辑的方法是找到form 最接近的.card 元素并从那里返回。

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

【讨论】：

在成功回调中，this 是否仍指刚刚提交的form？如果不是，那么用form 代替this 应该可以正常工作。

【解决方案3】：

首先在提交中引用您的表单$currentForm = $(this);，然后在 Ajax 响应中使用最后一个对插入器 li 的响应

通过搜索父卡然后附加到找到的主题如下：

$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(/[^a-z]+/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>

【讨论】：