Ajax成功函数类在每个元素上添加

Question

我正在构建一个Ajax函数来实现搜索功能，搜索函数运行良好，但是在success:函数上，我试图在整个搜索元素上添加类--但是这个类是在每个元素上添加的。

$('#id_search_tag').keyup(function(e) {
  $.ajax({
    url: "{% url 'searchTag' %}",
    data: {
      'w': $('#id_search_tag').val(),
    },
    method: 'get',
    dataType: 'json',
    success: function(response) {
      for (result of response.results) {
        $('#tags_list').prepend(`
    <div id="tags-browser" class="grid-layout">
        <div class="mySearchedTags">
               <div class="d-flex jc-space-between ai-center mb12">
                <div class="flex--item">
                    <a href="/answers/tag/tag" class="post-tag" >${result.tagName}</a>
                </div>
            </div>
        </div>
    </div>
       `)
      }
    }
  })
})

<div id="tags_list">
  <div id="tags-browser" class="grid-layout">
    <div class="mySearchedTags">
      <div class="d-flex jc-space-between ai-center mb12">
        <div class="flex--item">
          <a href="/answers/tag/tag" class="post-tag">{{tag}}</a>
        </div>
      </div>
    </div>
  </div>
</div>

在元素中，它在每个元素上显示<div id="tags-browser" class="grid-layout">，如：

<div id="tags-browser" class="grid-layout">
    <div class="mySearchedTags">
  ....
   ....
    ....

<div id="tags-browser" class="grid-layout">
    <div class="mySearchedTags">
  ....
   ....
    ....

但是，我只想在顶部添加，例如：

<div id="tags-browser" class="grid-layout">
    <div class="mySearchedTags">
        ....
        ....

    <div class="mySearchedTags">
        ....
        ....

    <div class="mySearchedTags">
        ....
        ....

</div>

我试过很多次了，但是它仍然在每个元素上添加。

Answer 1

将第一个div移出循环。在这里，我使用map并加入和销毁tagName以提高可读性。

$('#tags_list').prepend(`<div id="tags-browser" class="grid-layout">
  ${response.results.map(({tagName}) => `<div class="mySearchedTags">
            <div class="d-flex jc-space-between ai-center mb12">
                <div class="flex--item">
                    <a href="/answers/tag/tag" class="post-tag" >${tagName}</a>
                </div>
            </div>
        </div>`).join("")}
    </div>`)