A Custom jQuery Selector to Retrieve Labels for Inputs

This afternoon @DamienGuard asked how to select labels that are associated with input elements. I think I have an answer for him, or at least something that should be able to get him on the right track. If not, oh well its still pretty neat.

One of the great features of jQuery extensibility is the ability to create custom selectors. This is how the jQuery Sizzle selector engine is able to extend the core CSS selector rules to allow some pretty slick, tight selectors. For example ':text' can be used to return an array of all input with a type=text and textarea elements. If you review the list of jQuery selectors you will see many many more built into the core library.

$.extend($.expr[

':'

], {
mySelectorName:

function

(a) {

if

(

/*match*/

){

return

true

;
}

return

false

;

}
});

Above is a custom selector framework. Here you extend the jQuery library with a custom expression ($.expr[':], ') Inside the expression definition you give the expression a name, which is actually a function. The function accepts a parameter, which represents the element to be evaluated. In this case I am using the variable 'a'. Now you need to do your evaluation and there is no limit to what you can use for your evaluation, so shoot for the sky. If your filtering criteria are met, then return true, otherwise return false. If the filter is satisfied the element is added to the result set.

To solve Damien's need I am going to create a label$input selector. Inside the selector logic I get the value of the element's 'for' attribute. If there is a value, meaning it is defined and is not empty then I see if there is a matching input element. If the 'for' attribute is not available then it returns false to tell jQuery not to add the element to the matched set.

$.extend($.expr[

':'

], {
label4input:

function

(a) {

var

iFor = $(a).attr(

"for"

);

if

(iFor === undefined || iFor ===

''

) {

return

false

;
}

return

$(

"#"

+ iFor).length > 0;

}
});

The last step selects the a matching input field. Here I just use the value of the 'for' attribute with a '#' prefix. If there is a matching element then the custom selector returns true, otherwise it is false.

For some test markup I create a simple form that uses a label as a legend as well as labels for a couple of input fields. If the selector works then I append the name of the input field to a DIV element.

<

fieldset

>


<

ul

>


<

li

>


<

label

>


This is a orphan label

</

label

></

li

>


<

li

>


<

label

for

="firstName"

>


First Name

</

label

><

input

id

="firstName"

name

="firstName"

type

="text"

/></

li

>


<

li

>


<

label

for

="lastName"

>


Last Name

</

label

><

input

id

="lastName"

name

="lastName"

type

="text"

/></

li

>


</

ul

>


</

fieldset

>


<

hr

/><

br

/>


<

div

id

="labels"

></

div

>


When the document is loaded the following jQuery is executed to list the matching elements using the custom selector.

$(document).ready(

function

() {
$(

":label4input"

).each(

function

() {
$(

"<p>"

+ $(

this

).text() +

"</p>"

).appendTo(

"#labels"

);
});
});

The result is a list of matching inputs!

jQuery Custom Selector

So go forth and create great custom jQuery selectors.

Share This Article With Your Friends!

Googles Ads Facebook Pixel Bing Pixel LinkedIn Pixel