JQuery: Ориентация элемента с пред()

Question

Я пытаюсь добавить class="required" к label элементу, который в его простейшей форме (тип ввода = «текст», появится в следующей структуре от нашей формы программного обеспечения:

<div> 
    <label>X</label> 
</div> 
<input required type="text"> 

в основном, этикетка, завернутый в DIV, поэтому следующие прекрасно работает:

var a = $('*[required]').prev(); 
var b = a.find('label'); 
if (b) 
    b.addClass('required'); 

Однако, иногда разрыв между <input> и <label> больше, например, когда это радио-кнопка:

<div> 
    <label>X</label> 
</div> 
<span> 
    <div> 
     <input required type="radio"> 
    </div> 
</span> 

Итак, как я могу настроить таргетинг на ярлык, если он немного дальше назад? Я попытался связать .prev(), но не смог заставить это работать.

Answer 1

Было бы намного проще, если бы вы правильно использовали этикетки. Используйте атрибут for, чтобы связать его с входом на основе ID (убедитесь, что идентификаторы на ваших входах являются уникальными):

<div> 
    <label for="foo">X</label> 
</div> 

<input id="foo" required type="text"/> 

$('*[required]').each(function() { 
    var l = $('label[for="' + this.id + '"]'); 
    if(l.length > 0) { 
     l.addClass('required'); 
    } 
    else { 
     // some convoluted and easily broken DOM traversal fallback 
    } 
});