JQuery - выберите связанный элемент метки в поле ввода

У меня есть набор полей ввода, некоторые из них связаны с метками, а некоторые нет:

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

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

<input ... />

так, как я могу выбрать соответствующую метку для каждого входа, если она существует?

Ответы

Ответ 1

Вы не должны полагаться на порядок элементов, используя prev или next. Просто используйте атрибут for метки, так как он должен соответствовать идентификатору элемента, который вы сейчас управляете:

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;
    }
}

Надеюсь, это поможет!

Ответ 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
   }

Ответ 3

До тех пор, пока ваши элементы 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 не задано, элементы в любом случае не имеют семантического отношения друг к другу, и нет никакой пользы от использования тега метки в этом экземпляре, поэтому, надеюсь, вы всегда будете иметь это отношение.