Question

我将以下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.

Answer 1

$("#..").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) {
    ...

使用jQuery找不到某些元素，即使它们在那里

1 个答案: