0

我正在尝试获取父元素或祖父元素下某个类的元素计数，但我的选择器不起作用。

这是我的 HTML：

<div id="adv0" class="collapse">
            <div class="advContent">
                <div class="editor-label measure">
                    <label for="Height">Height*</label>
                </div>
                <span class="field-validation-error" data-valmsg-for="Height" data-valmsg-replace="true"><span class="" for="Height">A height is required.</span></span>
           </div>
</div>

这是我正在使用的 Jquery 代码：

var tabs = $('.collapse').not('.in');

    console.log("tabs.length: " + tabs.length);

    $(tabs).each(function () {

        console.log("number of errors: " + $(this).find('.field-validation-error').length);

        if ($(this).find('.field-validation-error').length > 0) {
            id = "#" + $(this).attr('id');
            $(id).collapse('show');
        }
    });

当我检查 $(this) 的 ID 属性时，它返回“adv0”，所以我知道 $(this) 是正确的起点。

任何帮助将不胜感激。

编辑

我添加了完整的未经编辑的 HTML，以防我错过了什么：

<div class="advGroup">
        <div class="advHeader" data-toggle="collapse" data-target="#adv0"><a href="javascript:;"><i class="icon-chevron-down"></i>Physical properties <span class="advanced">(advanced)</span></a></div>
        <div style="height: auto;" id="adv0" class="in collapse">
            <div class="advContent">
                <div class="editor-label measure">
                    <label for="Height">Height*</label>
                </div>
                <div class="editor-field controls controls-row measure">
                    <input data-val-required="A height is required." class="input-small90 input-validation-error" data-val="true" data-val-number="The field Height must be a number." id="Height" name="Height" placeholder="0" value="" type="text">
                    <select class="input-small122" id="HeightUnitId" name="HeightUnitId"              onclick="setHeightUnit()">
                      <option value="2">inches</option>
                      <option value="3">centimeters</option>
                      <option value="4">pixels</option>
                      </select>
                    <span class="field-validation-error" data-valmsg-for="Height" data-valmsg-replace="true"><span class="" for="Height">A height is required.</span></span>
                </div>

                <div class="editor-label measure">
                    <label for="Width">Width*</label>
                </div>
                <div class="editor-field measure">
                    <input data-val-required="A width is required." class="input-small90 input-validation-error" data-val="true" data-val-number="The field Width must be a number." id="Width" name="Width" placeholder="0" value="" type="text"> <span class="MesureUnit">inches</span>
                    <span class="field-validation-error" data-valmsg-for="Width" data-valmsg-replace="true"><span class="" for="Width">A width is required.</span></span>
                </div>

                <div style="display: none;" class="editor-label depth">
                    <label for="Depth">Depth</label>
                    <a data-original-title="Depth" href="javascript:;" class="tip" data-toggle="popover" data-content="Applies to 3 dimensional products only. This would not apply to prints for example." title=""><i class="icon-info-sign"></i></a>
                </div>
                <div style="display: none;" class="editor-field depth">
                    <input class="input-small90" data-val="true" data-val-number="The field Depth must be a number." id="Depth" name="Depth" placeholder="0" value="" type="text"> <span class="MesureUnit">inches</span>
                    <span class="field-validation-valid" data-valmsg-for="Depth" data-valmsg-replace="true"></span>
                </div>

                <div style="display: none;" class="editor-label weight">
                    <label for="Weight">Weight</label>
                    <a data-original-title="Weight" href="javascript:;" class="tip" data-toggle="popover" data-content="If you plan on using weight-based shipping then adding weight is mandatory for any non-print products." title=""><i class="icon-info-sign"></i></a>
                </div>
                <div style="display: none;" class="editor-field controls controls-row weight">
                    <input class="input-small90" data-val="true" data-val-number="The field Weight must be a number." id="Weight" name="Weight" placeholder="0" value="" type="text">
                    <select class="input-small122" id="WeightUnitId" name="WeightUnitId">     <option value="1">ounces</option>
                     <option value="2">grams</option>
                    </select>
                    <span class="field-validation-valid" data-valmsg-for="Weight" data-valmsg-replace="true"></span>
                </div>
            </div>
        </div>

编辑

添加了以下内容以显示代码被包装在一个侦听器中，该侦听器在表单验证器发现错误时触发：

$(document).ready(function () {

   $("form").bind("invalid-form.validate", function () {
    clearTimeout(t);
    hideLoader();
    $('#formErrorNotice').show().delay(1500).fadeOut();

    var tabs = $('.collapse').not('.in');

    console.log("tabs.length: " + tabs.length);

    tabs.each(function () {
        var $this = $(this),
            thisErrors = $this.find('.field-validation-error'),
            thisId = '#' + $this.attr('id');

        console.log("current tab ID: " + thisId);
        console.log("number of errors: " + thisErrors.length);

        if (thisErrors.length) {
            $(thisId).collapse('show');
        }
    });
});

同一块内的这条线应该在以下情况下触发：

$('#formErrorNotice').show().delay(1500).fadeOut();

所以我相信这是在适当的时候开火。

4

2 回答 2

2

目前我没有看到您的代码有任何问题，让我们重新格式化一下：

var tabs = $('.collapse').not('.in');

console.log("tabs.length: " + tabs.length);

tabs.each(function () {
    var $this = $(this),
        thisErrors = $this.find('.field-validation-error'),
        thisId = '#' + $this.attr('id');

    console.log("current tab ID: " + thisId);
    console.log("number of errors: " + thisErrors.length);

    if (thisErrors.length) {
        $(thisId).collapse('show');
    }
});

或工作小提琴：http: //jsfiddle.net/Rq8y7/

它现在有效吗？运行上述代码后，控制台中的调试消息是什么？

于 2013-07-11T23:36:00.160 回答
1

所以问题是不显眼的验证器在调用函数时没有更新错误类，因此除非使用 timeOut，否则无法获取错误。不是超时的忠实拥护者，我更深入地研究并发现验证器包含一个 errorMap 属性，该属性显示元素及其错误。一旦我有错误的元素，我可以简单地扫描到他们的父母并打开折叠的 div，如下所示：

$("form").bind("invalid-form.validate", function (form, validator) {
    //expose errors in collapsed divs
    for (var i in validator.errorMap) {
        //console.log(i, ":", validator.errorMap[i]);
        target = $("#" + i).parents(".collapse");
        $(target).collapse('show');
    }      
});
于 2013-07-12T12:47:31.677 回答