在 div 的后代中的任意位置查找类答案

【问题标题】：Find class anywhere in div's descendants在 div 的后代中的任意位置查找类
【发布时间】：2016-06-13 23:45:50
【问题描述】：

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

因此，如果.has-error 类出现在.section（包括孙子在内的所有后代）中的任何位置，则跨度.field-error 应该出现在.lbl.lblBig 中，它是紧接在.section 之前的兄弟，并包含该名称的标题手风琴部分。如果.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，因此我在这方面受到限制。任何帮助将不胜感激。如果可以，我会给你烤一块饼干，但这是互联网，没有 3D 打印烘焙技术。谢谢。

【问题讨论】：

您真的无法更改您提供的 html 中的任何内容吗？如果您在每个<input> 中添加属性required，它会在单击提交按钮时为您完成所有工作。
我希望我可以，但是没有。

标签： javascript jquery css forms twitter-bootstrap

【解决方案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/

【讨论】：