這真讓我抓狂。誰能看到我做錯了什么？
這是我的 HTML 模板。
<template id="note-template">
<div class="trip-note">
</div>
<div class="trip-note-footer">
<div class="d-flex justify-content-between">
<div>
<span class="note-author"></span>
•
<span class="note-date"></span>
</div>
<div>
<img class="edit-note" src="~/images/tteditnote.png" title="Edit Note">
<img class="delete-note" src="~/images/ttdeletenote.png" title="Delete Note">
</div>
</div>
</div>
</template>
這是我的 JavaScript。
var $container = $('#trip-notes');
var $template = $('#note-template');
$container.empty();
response.forEach(function (element) {
var $note = $($template.html());
$note.find('.trip-note').html(element.html);
$note.find('.note-author').text(element.author);
$note.find('.note-date').text(element.createDate);
$container.append($note);
});
除了 mydiv.trip-note沒有設定為element.html.
author并createDate設定得很好。我已經確認element.html包含預期的標記。我已經多次重新鍵入類名（在標記和 JavaScript 中）。我嘗試混合和匹配html()，text()結果總是一樣的：除了div.trip-note.
我要么遺漏了一些非常愚蠢的東西，要么發生了一個特殊的問題。
更新
我創建了一個jsfiddle。
uj5u.com熱心網友回復：
.find()搜索后代，它不會找到您正在搜索的頂級元素。由于.trip-note是 的頂級元素之一$note，因此它被選中。
不要使用$template.html()，而是克隆$template. 那么一切都會是后代。您可以.html()在附加$container到排除<template>頂級元素時使用。
var $container = $('#trip-notes');
var $template = $('#note-template');
$container.empty();
response.forEach(function (element) {
var $note = $template.clone();
$note.find('.trip-note').html(element.html);
$note.find('.note-author').text(element.author);
$note.find('.note-date').text(element.createDate);
$container.append($note.html());
});轉載請註明出處，本文鏈接：https://www.uj5u.com/net/380678.html
標籤：javascript html 查询