DOM内で親があまりにも上に行く

Question

動的な連絡先フォームのエラーチェックスクリプトを作成しようとしています...入力フィールドのすぐ上のhtml要素のクラスを変更しようとするときを除いて、私のコードは..hereです：

<div class="container"> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <h4>Address:</h4> 
         <address> 
          <p> 
           Plot 12<br> 
           Ogudu Phase 2 <br> 
           Ogudu Lagos <br> 
           <a href="mailto:marketing@businessplusng.com">marketing@businessplusng.com</a> 
          </p> 
         </address> 
        </div> 
        <form method="post" id="contactform" class="form-minimal"> 
         <div class="col-sm-4"> 
          <div class="form-group"> 
           <label for="name">Name</label> 
           <input type="text" class="form-control" name="name" id="name" placeholder="Enter name" title="Please enter your name (at least 2 characters)"/> 
           <div class="form-line"></div> 
          </div> 

          <div class="form-group"> 
           <label for="email">Email</label> 
           <input type="email" class="form-control" name="email" id="email" placeholder="Enter email" title="Please enter a valid email address"/> 
           <div class="form-line"></div> 
          </div> 

          <div class="form-group"> 
           <label for="phone">Phone</label> 
           <input name="phone" class="form-control required digits" type="tel" id="phone" size="30" value="" placeholder="Enter email phone" title="Please enter a valid phone number (at least 10 characters)"> 
           <div class="form-line"></div> 
          </div> 

         </div> 
         <div class="col-sm-4"> 
          <div class="form-group"> 
           <label for="comments">Your Brief</label> 
           <textarea name="comment" class="form-control" id="comments" cols="3" rows="5" placeholder="Enter your message…" title="Please enter your message (at least 10 characters)"></textarea> 
           <div class="form-line"></div> 
          </div> 


         </div>       
         <div class="col-md-8 col-md-offset-4"> 
          <button name="submit" type="submit" class="btn large primary" id="submit"> Submit</button> 
          <div class="result"></div> 
         </div> 
        </form> 

とここで私は（）addClass（）.parentを呼び出したときに、私のjavascriptのコード

var form = $("#contactform"); 
var submit= $("#submit"); 
var name =$("#name"); 
var email =$("#email"); 
var comments =$("#comments"); 
form.submit(function(e) { 
    e.preventDefault(); 
if($("input#name").val().length < 10) 
    { 
     $(this).parent(".form-group").addClass("has-error"); 
    } 
    else 
    { 
     submit.addClass("disabled").html("Please wait"); 
     $.post("email.php",form.serialize(),"text") 
     .done(function(data){ 
      submit.removeClass("disabled").html("Mail Sent"); 
      alert(data); 
     }) 
     .fail(function(data) 
     { submit.removeClass("disabled").html("Mail Failed"); 
     }); 
    } 
}); 

はとても基本的に...それはすべての道に上がるいます。アドレス欄の上の行div ...どのように私は名前の入力要素（すなわち親フォームグループdiv）の上に行くためにこれを修正することができます

任意のヘルプを大幅に

Answer 1

を高く評価され、フォームで参照されている$(this)は、機能を提出フォーム$("#contactform")自体、ない$("input#name")です。したがって$(this).parent()は<div class="row">を参照しています。あなたが何をしたいかを達成する

一つの方法は、$(this).find("input#name").parent(".form-group").addClass("has-error");