Question

所以我的HTMl文档中有一个模板，如下所示

<template id="attachment-template">
    <div class="mdl-grid mdl-grid--no-spacing attachment" data-file-type="" data-file-path="" data-file-name="" onclick="javascript:showAttachment($(this).data('file-path'), $(this).data('file-name'));">
        <div class="mdl-cell mdl-cell--12-col">
            <div class="attachment-heading"></div>
            <div class="attachment-sub-heading"></div>
        </div>
    </div>
</template>

我使用此模板和jQuery动态生成一些内容，并创建一个attachments

列表

当我动态创建这些元素时，我需要在数据属性中设置值。所以我使用以下jQuery代码

var file_type_id = 5;
var filepath = '/some-path/to/filename.ext';
var filename = 'filename.ext';
var template = $($('#attachment-template').html().trim());
template.find('.attachment').data('file-type', file_type_id);
template.find('.attachment').data('file-path', filepath);
template.find('.attachment').data('file-name', filename);

然而，template.find（＆＃39; .attachment＆＃39;）正在返回一个空白对象。如果我用以下代码替换它，它至少打印正确的元素。我在这里错过了什么？为什么我无法使用finder？

选择父元素

console.log(template[0]);

Answer 1

这是因为那里：

var template = $($('#attachment-template').html().trim());

你得到内部 html。 find方法也会在 inner html中进行搜索。所以你的template var等于：

<div class="mdl-grid mdl-grid--no-spacing attachment" data-file-type="" data-file-path="" data-file-name="" onclick="javascript:showAttachment($(this).data('file-path'), $(this).data('file-name'));">
        <div class="mdl-cell mdl-cell--12-col">
            <div class="attachment-heading"></div>
            <div class="attachment-sub-heading"></div>
        </div>
    </div>

并搜索这些元素：

<div class="mdl-cell mdl-cell--12-col">
    <div class="attachment-heading"></div>
    <div class="attachment-sub-heading"></div>
</div>

当然你找不到任何东西。该错误位于第一行，您应该将其替换为：

var template = $('#attachment-template');

Answer 2

你应该用div包装模板。

var file_type_id = 5;
var filepath = '/some-path/to/filename.ext';
var filename = 'filename.ext';
var template = $($('#attachment-template').html().trim());
var div = $('<div></div>').html(template);
var attachment = div.find('.attachment');
attachment.data('file-type', file_type_id);
attachment.data('file-path', filepath);
attachment.data('file-name', filename);

jQuery没有在模板中选择元素

2 个答案: