divの子孫にあるクラスを見つけよう

Question

私は、各アコーディオンセクションにフォーム要素を持つブートストラップアコーディオン/ウェルを持っています。ユーザーが異なるフィールドとアコーディオンセクションをナビゲートするとき、必要なすべてのデータを入力したかどうかに基づいてスパンを表示したいと思います。すべての入力フィールドは.sectionにあります。ユーザーが必要なフィールドを記入しない場合、入力とラベルの周囲の.form-groupはクラス.has-errorを取得します。問題を解決すると、.has-errorは.no-errorに置き換えられます。

.has-errorクラスは.section（孫を含むすべての子孫）内の任意の場所に表示されたのであれば、スパン.field-errorは.section直前の兄弟であり、そのアコーディオンのセクションのタイトルを含む、.lbl.lblBigに表示されます。 .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プリントベーキング技術はありません。ありがとうございました。

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/