jQuery-выбор связанного элемента метки поля ввода [дубликат]
этот вопрос уже есть ответ здесь:
- найти html метку, связанную с данным входом 21 ответов
У меня есть набор полей ввода, некоторые из них имеют связанные метки, некоторые нет:
<label for="bla">bla</label> <input type="text" id="bla" />
<label for="foo">bla <input type="checkbox" id="foo" /> </label>
<input ... />
Итак, как я могу выбрать соответствующую метку для каждого входа, если она существует?
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; } }
Я надеюсь, что это помогает!
есть два способа указать метку для элемента:
- Установка атрибута метки " for " для идентификатора элемента
- размещение элемента внутри метки
Итак, правильный способ найти метку элемента
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 в этом случае, так что, надеюсь, вы всегда будете иметь это отношение определено.