jQueryのトラバーサル - 現在の入力に前のラベルを見つける

Question

私はjQueryをそれほど使用していないため、簡単な質問です。

このシナリオでは、ラベルのhtmlにアクセスするためのより素早く簡単な方法がありますか？ここで

は、これは私がラベル用のHTMLをつかむために、現在使用しているjQueryのスニペットです

<tr> 
    <td> 
     <label>Please fill in name:</label> 
    </td> 
    <td> 
     <input type="text" id="txtName" class="validate" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <label>Date of Birth:</label> 
    </td> 
    <td> 
     <input type="text" id="txtDOB" class="validate" /> 
    </td> 
</tr> 

、一例として、ダウン易しく書き直さバージョンです。

$(document).ready(function(){ 
    $('.validate').each(function(){ 
     if(!$(this).val()) 
     { 
      var label = $(this).parent().prev().find('label').html(); 
      alert(label); 
     } 
    }); 
}); 

すべてのアイデアは

Answer 1

はい、次のコードを考えてみましょう代わりにParent()

のClosest()を使用することによってそうする別のきちんとした方法があり高く評価されています

$(document).ready(function(){ 
    $('.validate').each(function(){ 
     if(!$(this).val()) 
     { 
      var label = $(this).closest("tr").find('label').html(); 
      alert(label); 
     } 
    }); 
}); 

Closest()：をセレクタに一致する最初の要素を取得します。現在の要素から順に処理されます。 DOMツリーを通して。

Answer 2

はい、あなたは少しそれを短縮することができます。

$(document).ready(function(){ 
    $('.validate').each(function(){ 
     if(!$(this).val()) 
     { 
      var label = $(this).parents('tr').find('label').html(); 
      alert(label); 
     } 
    }); 
}); 

Answer 3

私はそれはあなたの質問から流用の一種だにもかかわらず、答えとしてこれを追加します：

あなたが使用しています非表形式のデータのためのテーブルベースのレイアウト、あなたはjQueryのになる場合には、そのような

<div> 
<label>Please fill in name:</label> 
<input type="text" id="txtName" class="validate" /> 
</div> 
<div> 
<label>Date of Birth:</label> 
<input type="text" id="txtDOB" class="validate" /> 
</div> 

ようなレイアウトを持つべきです超シンプル：

$('.validate').each(function(){ 
     if(!$(this).val()) 
     { 
      var label = $(this).prev('label').html(); 
      alert(label); 
     } 
    }); 

ライブ例：あなたがいないだけで、ラベルの属性「の」を使用する必要がありますhttp://jsfiddle.net/MDFEm/

Answer 4

が、それはそれはあなたに短いセレクターを与えるアクセス/セマンティックです：

<table> 
    <tr> 
     <td> 
     <label for="txtName">Please fill in name:</label> 
     </td> 
     <td> 
     <input type="text" id="txtName" class="validate" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <label for="txtDOB">Date of Birth:</label> 
     </td> 
     <td> 
     <input type="text" id="txtDOB" class="validate" /> 
     </td> 
    </tr> 
</table> 

$(document).ready(function(){ 
    $('.validate').each(function(){ 
    if(!$(this).val()) 
    { 
     var label = $('label[for="'+$(this).attr('id')+'"]').html(); 
     alert(label); 
    } 
    }); 
});​