javascript - 在 div 后代中的任何位置查找类

Question

我有一个 Bootstrap Accordion /井，每个 Accordion 部分都有表单元素。当用户浏览不同的字段和 Accordion 部分时，我希望根据他们是否填写了所有必需的数据来显示一个跨度。所有输入字段都位于 .section 内。如果用户未填写必填字段，则输入和标签周围的 .form-group 会获取类 .has-error。当他们修复问题后，.has-error 会替换为 .no-error。

因此，如果 .has-error 类出现在 .section 中的任何位置(所有后代，包括孙子)，则跨度 .field-error应该出现在 .lbl.lblBig 中，它是 .section 之前的同级，包含该 Accordion 部分的标题。如果 .has-error 不在视线范围内，那么我希望跨度 .field-ok 显示在 .lbl.lblBig 内。

这是基本布局:

 <div class="lbl lblBig">
      Section 1
      <span class="field-error" style="display:none"></span>
      <span class="field-ok" style="display:none"></span>
 </div>
 <div class="section"> <!--input fields for section 1-->
      <div class="form-group">
           <label class="control-label">First</label>
           <input class="required form-control" placeholder="First">
      </div>
      <div class="form-group">
           <label class="control-label">Last</label>
           <input class="required form-control" placeholder="Last">
      </div>
 </div>
 <div class="lbl lblBig">
      Section 2
      <span class="field-error" style="display:none"></span>
      <span class="field-ok" style="display:none"></span>
 </div>
 <div class="section"> <!--input fields for section 2-->
      <div class="form-group">
           <label class="control-label">Street</label>
           <input class="required form-control" placeholder="Street">
      </div>
      <div class="form-group">
           <label class="control-label">City</label>
           <input class="required form-control" placeholder="City">
      </div>
 </div>

我已经编写了这个脚本，但它不起作用。我不需要 .no-error 类，但我创建它是为了尝试让某些东西正常工作。我在搜索 .section 的后代并使用该信息更改 .lbl.lblBig 时遇到问题。

$(".section").each(function(){
    if ($(this).find(".has-error").length) {
        $(this).prev(".lbl.lblBig").find(".field-error").show();
        $(this).prev(".lbl.lblBig").find(".field-ok").hide();
    }
    else if ($(this).find(".no-error").//do opposite of length? ) {
        $(this).prev(".lbl.lblBig").find(".field-error").hide();
        $(this).prev(".lbl.lblBig").find(".field-ok").show();
    }
});

我无法更改任何页面和表单的 HTML，因此我在这方面受到限制。任何帮助将不胜感激。如果可以的话，我会给你烤一 block cookies ，但这是互联网，没有 3D 打印烘焙技术。谢谢。

Answer 1

您的条件表达式应为 if (length > 0)。

$(".section").each(function(){
    if ($(this).find(".has-error").length > 0) {
        $(this).prev(".lbl.lblBig").find(".field-error").show();
        $(this).prev(".lbl.lblBig").find(".field-ok").hide();
    }
    else {
        $(this).prev(".lbl.lblBig").find(".field-error").hide();
        $(this).prev(".lbl.lblBig").find(".field-ok").show();
    }
});

http://jsfiddle.net/9dbyq2v3/