我正在尝试获取父元素或祖父元素下面某个类的元素数，但我的选择器不起作用。
这是我的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();
所以我相信这是在适当的时候解雇。
答案 0 :(得分：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/
现在有效吗？运行上面的代码后，控制台中的调试消息是什么？
答案 1 :(得分：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');
}
});