親または祖父母要素の下にある特定のクラスを持つ要素の数を取得しようとしていますが、セレクターが機能していません。
ここに私の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();
したがって、これは適切なタイミングで発砲していると思います。