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

我正在尝试选择所有子元素并过滤那些具有特定属性的子元素。其中一个元素是contenteditable div，它包含一个datarequired属性（参见下面的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

主题：
电邮：




取消

---

我缺少什么？

基于没有任何上下文的示例代码，它看起来像

表单

代表一个DOM节点，而不是一个jQuery对象

只需将其包装在jQuery方法中，使其成为jQuery对象，它就可以正常工作

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

---

根本就没有匹配的元素

在这种情况下，你在做什么

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

function validateRequiredFields(form) {

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

    ....

form.contents（）

获取表单的九个子项，其中包括textnodes

<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>

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

$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 ?

---

不确定这是否是问题的原因，但在第一个示例中，您使用的是$（“#mail container”）元素。在代码（！validateRequiredFields（$（“#表单电子邮件预览”））中，您引用了$（“#表单电子邮件预览”）元素。我希望这有帮助

你能粘贴完整的代码吗有很多JS代码。您特别希望看到什么？当您调用validateRequiredFields（）时，“form”不是jQuery对象。@TyrionGraphiste-当然是，它已清楚地传递给函数。请参阅编辑。该函数正在被传递一个jQuery对象。您又一次拯救了我，@adeno。非常感谢！

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 ?