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

Can't find certain elements with jQuery even though they are there

本文关键字：在那里 元素 jQuery      更新时间：2023-09-26

我将以下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) {
    ...
相关文章：