要素がクラスを持っていないかどうかを調べる

Question

私はたくさんの投稿を見ていて、うまくいくような解決策を見つけていません...この時点でちょっと不満を感じているので、解決策がありました。

私は作成しているウィジェットで属性「必須」のフィールドを検証しようとしていますが、ユーザーが「作成」ボタンをクリックすると新しい可視セクションが作成され、それは様々な理由でクラス "hide"で隠されたセクションに複製されます。

私の検証コードは次のようになります。

var $required = $("input[required]").css('border', '1px solid #CCC'); 
    $invalid = $required.filter(function(){ 
     return !this.value; 
    }).css('border', '1px solid red'); 

if($invalid.length){ 
    alert('Please fill in all required fields'); 
} else { 
    //ajax call 
} 

これはすべて私の他のウィジェットでうまく動作しますが、この新しいウィジェット内の隠された重複があるので、それは目に見えるフィールドに渡しますが、上の失敗隠されたフィールド。

私のソリューションは、その親要素クラス「隠す」を持っていませない無効な長さを有しているかどうかを検索するための「if」ステートメントにAND場合は、2番目の部分を追加しました。しかし、次のようにステートメントを変更して動作していないよう：

if($invalid.length && !$("input[required]").closest("li").hasClass("hide")){ 
    alert('Please fill in all required fields'); 
} else { 
    //ajax call 
} 

今、すべての時間を渡すように見える...

私が検証しようとしている要素の（一般的な）構造である - 私はちょうど見るためにそれを簡素化するために、コードの大部分を削除：

<li> 
    <div class="row-fluid> 
     <div class="span3"> 
      <!-- Some content --> 
     </div> 
     <div class="span9"> 
      <input type="text" required /> 
      <input type="text" /> 
      <input type="text" /> 
     </div> 
    </div> 
</li> 

隠し要素はちょうどそれが

<li class="hide"> 

01を持ち、同じ構造を次の代わりに

を親要素として使用します。

私は私のjQueryの構文で何か問題があると仮定し、私は長い間、今、私はおそらくちょうどスーパーシンプルな何かを見下ろすてることのために、この問題を解決しようとしてきた...

思考？ ;）

Answer 1

あなたif文では、選択した要素のいずれかがクラスを持っている場合hasClass("hide")が真であるため、必要な要素のどれは、隠されたLIではありませんかどうかテストしています。

セレクタで:visible疑似クラスを使用すると、非表示の要素のみをテストできます。

var $required = $("input[required]:visible").css('border', '1px solid #CCC'); 

または、非表示の親からの検索を使用して必要な入力を見つけることができます。

var $required = $("li:not(.hide) input[required]").css('border', '1px solid #CCC'); 

か、あなたのフィルタ機能のチェックを行うことができますが：

$invalid = $required.filter(function() { 
    return !this.value && !$(this).closest("li").hasClass("hide"); 
});