javascript - 为什么这个 jQuery 选择器不返回任何元素？

Question

我正在尝试选择所有子元素并过滤具有某些属性的子元素。其中一个元素是一个可内容编辑的 div，其中包含所需数据的属性(请参阅下面的 HTML)。当我使用以下选择器时，它返回 1:

$("#mail-container").filter('[required], [data-required]').length

但是当我执行以下命令时，返回0:

form.contents().filter('[data-required]').length;

注意，以下返回 9:

form.contents().length;

编辑

下面的函数调用如下:

$("#send-email").on('mouseup', function (e) {
    if (!validateRequiredFields($("#form-email-preview"))) return false;
    var data = {};
    data.action = "manuscript-request-email";
    data["writers-id"] = $("#writer-id").val();
    data["account-id"] = localStorage.getItem("account-id");
    data.subject = $("#subject").val();
    data.body = $("#mail-container").html();
    ajax('post', 'php/writers.php', data, sentEmail);
    function sentEmail(result) {
        console.log("email-res=" + result);
        return2table();
    }
});

function validateRequiredFields(form) {
    var $reqFlds = form.contents().filter('[required], [data-required]');
    var ret = true;
    debugger
    $reqFlds.each(function() {
        var $this = $(this);
        var result = ($this.eq("input, select, textarea")) ? $this.val() : $this.text();
        if (!$.trim(result)) {
            $this.prop('data-toggle=popover', true);
            $this.show();
            $this.popover("destroy").popover({ content: "Please fill out this field.", placement: 'bottom' });
            $this.popover('show');
            $this.focus();
            ret = false;
            return false;
        }
    });
    return ret;
}

HTML

<form id="form-email-preview" style="margin-top: 24px;">
    <div id="main-container" class="hidden" style="border: 1px solid black; padding: 6px;  border-radius: 8px;">
        <span><b>Subject:</b></span><input id="subject" type="text" value="Manuscript Request" style="display: inline-block" />
        <p><b>Email:</b></p>
        <div id="mail-container" contenteditable data-toggle="popover" data-required data-placement="top" data-title ="Required field" style="display: inline-block"></div><br/>
        <p id="buttons" class="hidden">
            <input type='button' id='send-email' class='btn btn-custom-success' value='Send Email' /><span>   </span>
            <button id='cancel-email' class = 'btn btn-danger'>Cancel</button>
        </p>
    </div>
    <div id="current-row" class="hidden"></div>
    <input id="current-checkbox" type="checkbox" class="hidden" />
    <input id="current-tr" type="number" class="hidden" />
</form>

我错过了什么？

Answer 1

根本就没有匹配的元素？

在这种情况下，你正在做

validateRequiredFields( $("#form-email-preview") );

function validateRequiredFields(form) {

    var $reqFlds =  form.contents().filter('[required], [data-required]');

    ....

form.contents() 获取表单的九个子项，其中包括文本节点

<form id="form-email-preview" style="margin-top: 24px;">
    <!-- text node here -->                                           <!-- 1 -->
    <div id="main-container" ...></div>                               <!-- 2 -->
    <!-- text node here -->                                           <!-- 3 -->
    <div id="current-row" class="hidden"></div>                       <!-- 4 -->
    <!-- text node here -->                                           <!-- 5 -->
    <input id="current-checkbox" type="checkbox" class="hidden" />    <!-- 6 -->
    <!-- text node here -->                                           <!-- 7 -->
    <input id="current-tr" type="number" class="hidden" />            <!-- 8 -->
    <!-- text node here -->                                           <!-- 9 -->
</form>

这是九个，它们都不是您要查找的元素，这就是 contents() 的作用

Get the children of each element in the set of matched elements, including text and comment nodes.

然后您过滤这九个元素，并且仅过滤这九个元素，因为 filter() 不会过滤这九个元素的子元素，仅过滤那些

Reduce the set of matched elements to those that match the selector or pass the function's test.

您有一组九个元素，其中没有一个具有您要查找的属性，并且您过滤了该组，最终......什么都没有

你想要的只是

var $reqFlds = form.find('[required], [data-required]');

作为旁注，请阅读您正在使用的方法的文档，并且应该清楚它们的作用，例如这些方法是不正确的

$this.eq("input, select, textarea") // eq() accepts a number only

$this.prop('data-toggle=popover', true); // accepts a property, 
                                         // not an entire attribute, with the value ?