jQuery可以处理内存中的HTML结构吗？

在jQuery中处理内存中的HTML结构

我有一段HTML代码：

搜索结果：

有一个隐藏的div元素（id=template），我希望我们将其作为定制的庙宇，然后将一个或多个定制的庙宇项目放入div目标元素（id=target）。可以将其视为显示搜索结果的庙宇。 我想自定义模板标题和模板图像，模板图像还应该得到一个点击事件处理程序。 这是我尝试过的TypeScript代码：

let template: JQuery = $('#template');
let target: JQuery = $('#target');

/* loop simulates search results */
for (var i = 0; i < 3; i++) {

    let item: JQuery = $($.parseHTML(template[0].innerHTML));

    item.filter('#template-title').html('This is title ' + i.toString());
    item.filter('#template-image').prop('src', '/img/image' + i.toString() + '.png');
    item.filter('#template-image').on('click', () => alert('Clicked on image ' + i.toString()));

    target.append(item);
}

let-template:JQuery=$（“#template”）；
让target:JQuery=$（'#target'）；
/*循环模拟搜索结果*/
对于（变量i=0；i<3；i++）{
let项：JQuery=$（$.parseHTML（模板[0].innerHTML））；
item.filter（'#template title'）.html（'这是title'+i.toString（））；
item.filter（'#template image'）.prop（'src'，'/img/image'+i.toString（）+'.png'）；
item.filter（“#模板图像”）.on（'click'，（）=>alert（'Clicked on image'+i.toString（））；
目标。追加（项目）；
}

我正在使用jQuery，但看起来filter语句不起作用。

---

是否可以使用内存中的树结构并使用jQuery处理？或者，这只能通过纯JavaScript实现。

是的，您可以修改内存中的jQuery对象

但是，您的方法存在一些问题

您不能在页面中重复ID，因此请将模板项改为类

使用

find（）

not

filter（）

，因为所需的元素不在对象的根中，并且嵌套得更深

---

基本非类型脚本示例：

let template=$（'#template'）；
设target=$（“#target”）；
/*循环模拟搜索结果*/
对于（变量i=0；i<3；i++）{
让item=template.children（）.clone（）；
item.find（'.template title'）.html（'这是title'+i）；
目标。追加（项目）；
}

.margin-bottom20{边框：2px实心#ccc；边框底部：10px}

搜索结果：

let template: JQuery = $('#template');
let target: JQuery = $('#target');

/* loop simulates search results */
for (var i = 0; i < 3; i++) {

    let item: JQuery = $($.parseHTML(template[0].innerHTML));

    item.filter('#template-title').html('This is title ' + i.toString());
    item.filter('#template-image').prop('src', '/img/image' + i.toString() + '.png');
    item.filter('#template-image').on('click', () => alert('Clicked on image ' + i.toString()));

    target.append(item);
}