jQuery - selezionare l'elemento etichetta associata a un campo di input

Question

Ho una serie di campi di input, alcuni di loro hanno etichette associate, alcuni non:

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

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

<input ... /> 

così, come posso selezionare l'etichetta associata per ciascun input, se esiste?

Answer 1

Non si deve fare affidamento sull'ordine degli elementi utilizzando prev o next. Basta usare l'attributo for dell'etichetta, come dovrebbe corrispondere alla ID dell'elemento che si sta manipolando:

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

Tuttavia, ci sono alcuni casi in cui l'etichetta non avrà for set, nel qual caso l'etichetta sarà il genitore del controllo associato. Per trovarlo in entrambi i casi, è possibile utilizzare una variante di quanto segue:

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

Spero che questo aiuti!

Answer 2

Finché ei tuoi input e label elementi sono associati con le loro id e for attributi, si dovrebbe essere in grado di fare qualcosa del genere:

$('.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! 
    } 
}); 

Se for non è impostato allora gli elementi non hanno alcuna relazione semantica l'un l'altro, e non c'è alcun vantaggio nell'usare il tag label in quell'istanza, quindi spero che la relazione venga sempre definita.

Answer 3

Ci sono due modi per specificare un'etichetta per elemento:

1. dell'etichetta Setting "per" attribuire a id dell'elemento
2. elemento Pubblica etichetta interna

Quindi, il modo corretto di cercare l'elemento di l'etichetta è

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 
    }