Question

我正在尝试选择所有子元素并过滤那些具有某些属性的子元素。其中一个元素是一个包含数据必需属性的contenteditible 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()所做的

获取匹配元素集中每个元素的子元素，包括文本和评论节点。

然后你过滤那九个元素，只有那九个，因为filter()不会过滤那九个中的孩子，只有那些

将匹配元素集减少到与选择器匹配的元素集通过功能测试。

你有一组九个元素，其中没有一个具有你正在寻找的属性，你过滤了那个集合，你最终得到......没什么

你想要的只是

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 ?

Answer 2

基于没有任何上下文的示例代码，看起来form表示DOM节点而不是jQuery对象。

将它包装在jQuery方法中以使其成为jQuery对象，然后它应该可以正常工作。

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

Answer 3

不确定这是否是导致问题的原因，但在第一个示例中，您使用的是$（＆＃34;＃mail-container＆＃34;）元素。在你的代码中（！validateRequiredFields（$（＆＃34;＃form-email-preview＆＃34;）））你引用$（＆＃34;＃form-email-preview＆＃34;）元素。我希望它有所帮助

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

3 个答案: