I have a set of input fields, some of them have labels associated, some not:
<label for="bla">bla</label> <input type="text" id="bla" />
<label for="foo">bla <input type="checkbox" id="foo" /> </label>
<input ... />
so, how can I select the associated label for each input, if it exists?
This question is related to
javascript
jquery
forms
There are two ways to specify label for element:
So, the proper way to find element's label is
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
}
As long and your input
and label
elements are associated by their id
and for
attributes, you should be able to do something like this:
$('.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!
}
});
If for
is not set then the elements have no semantic relation to each other anyway, and there is no benefit to using the label tag in that instance, so hopefully you will always have that relationship defined.
Source: Stackoverflow.com