jQuery-выбор связанного элемента метки поля ввода [дубликат]


этот вопрос уже есть ответ здесь:

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

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

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

<input ... />

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

3 92

3 ответа:

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

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

однако, есть некоторые случаи, когда метка не будет иметь for set, в этом случае метка будет родительским элементом связанного с ней элемента управления. Чтобы найти его в обоих случаях, вы можете использовать следующий вариант:

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

Я надеюсь, что это помогает!

есть два способа указать метку для элемента:

  1. Установка атрибута метки " for " для идентификатора элемента
  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
   }

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