web-dev-qa-db-ja.com

jQuery-入力フィールドの関連するラベル要素を選択します

入力フィールドのセットがあり、それらの一部にはラベルが関連付けられていますが、一部は関連付けられていません。

<label for="bla">bla</label> <input type="text" id="bla" />

<label for="foo">bla <input type="checkbox" id="foo" /> </label>

<input ... />

したがって、入力が存在する場合、各入力に関連付けられたラベルを選択するにはどうすればよいですか？

javascriptjqueryforms
100
Alex

prevまたはnextを使用して要素の順序に依存しないでください。ラベルのfor属性を使用するだけです。これは、現在操作している要素のIDに対応する必要があるためです。

var label = $("label[for='" + $(this).attr('id') + "']");

ただし、ラベルにforが設定されない場合があります。その場合、ラベルは関連するコントロールの親になります。両方の場合でそれを見つけるには、次のバリエーションを使用できます。

var label = $('label[for="' + $(this).attr('id') + '"]');

if(label.length <= 0) {
    var parentElem = $(this).parent(),
        parentTagName = parentElem.get(0).tagName.toLowerCase();

    if(parentTagName == "label") {
        label = parentElem;
    }
}

これがお役に立てば幸いです！

181
jgradim

要素のラベルを指定するには、2つの方法があります。

  1. ラベルの「for」属性を要素のIDに設定
  2. ラベル内に要素を配置

したがって、要素のラベルを見つける適切な方法は

   var $element = $( ... )

   var $label = $("label[for='"+$element.attr('id')+"']")
   if ($label.length == 0) {
     $label = $element.closest('label')
   }

   if ($label.length == 0) {
     // label wasn't found
   } else {
     // label was found
   }
47
Maxim Kulkin

inputおよびlabel要素がidおよびfor属性によって関連付けられている限り、次のようなことができるはずです。

$('.input').each(function() { 
   $this = $(this);
   $label = $('label[for="'+ $this.attr('id') +'"]');
   if ($label.length > 0 ) {
       //this input has a label associated with it, lets do something!
   }
});

forが設定されていない場合、要素は互いにセマンティックな関係を持たず、そのインスタンスでラベルタグを使用する利点はないため、常にその関係が定義されていることを願っています。

15
Nathan Anderson