我正在構建一個ajax函式來實作search functionalities并且搜索功能作業正常但是成功函式i am trying to add class on whole searched element但是該類正在添加每個元素。
$('#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" >
<div >
<div >
<div >
<a href="/answers/tag/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>
在 Inspect Element 中，它顯示<div id="tags-browser" >在每個元素上，例如：-
<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>
我已經嘗試了很多次，但它仍在添加每個元素。任何幫助將非常感激。先感謝您。
uj5u.com熱心網友回復：
嘗試這個
$('#tags_list').prepend(`<div id="tags-browser" >
${response.results.map(({tagName}) => `<div >
<div >
<div >
<a href="/answers/tag/tag" >${tagName}</a>
</div>
</div>
</div>`).join("")}
</div>`)
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/354989.html
標籤：javascript html 查询 css
上一篇：反應在事件之外的函式中使用引數