我将以下HTML代码存储为变量：
<body>
<div>
<table>
<field id='Contact Name' required>
<exists>$value<br></exists>
<notexists></notexists>
</field>
<field id='Job Role' required>
<exists>$value<br></exists>
<notexists></notexists>
</field>
</table>
</div>
</body>
</html>
现在，我想做的是访问此代码，并根据表单中的输入更改每个字段的$ value值，然后在iFrame中呈现最终的html。
这是我用来执行此操作的JavaScript代码：
function renderTemplate() {
var template = $(selectedTemplate.html).contents(); //HTML code I have given above.
$("input").each(function(index, input) {
var element = $(input); //<input type="text" ref="Contact Name">
if (element.attr("ref")) {
var reference = element.attr("ref");
var field = template.find("field[id='" + reference + "']");
if (typeof(field) != undefined) {
var exists = field.find("exists");
var notExists = field.find("notexists");
if (typeof(exists) != undefined && typeof(notexists) != undefined) {
if (element.val()) {
exists.html(exists.html().replace("$value", element.val()));
} else {
exists.html(notExists.html());
}
$('#signaturePreview').contents().find('html').html(template.html());
}
}
}
});
}
现在，无论出于何种原因，它都无法使用我提供的选择器来查找字段。
我使用chrome控制台进行了一些测试，即使使用，它也根本找不到任何字段：
template.find("field") // Gives 0 results.
$("#..").contents().find("..")将始终返回空数组，请勿使用.contents，即：
var template = $(selectedTemplate.html);
要解决其他一些问题：
ID中的1个空格不是有效的HTML，但是您可以使用[id= https://stackoverflow.com/a/701958/2181514进行选择。
2 jQuery.find将返回一个空数组[]，而不是undefined在找不到任何匹配项时返回。您将正常检查长度，例如：
var items = $("body").find("li.item");
if (items.length > 0) {
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句