Inefficient selector for/label attribute on radio and checkboxes

[mkhpalm]

I noticed a query looking for label elements as titles in checkboxes and radio buttons is somewhat inefficient:

​http://dev.jqueryui.com/browser/trunk/ui/jquery.ui.button.js?rev=3935

Lines 198-199:

this.buttonElement = this.element.parents().last().find( "[for=" + this.element.attr("id") + "]" );

That means it is going to start at the top of the markup and iterate absolutely everything looking for the label that usually resides under the same parent. If you have too many checkboxes and radio buttons on a page I was getting this iterating up to 160,167 ATTR requests when I profiled.

To sort of demonstrate how easily something like that exploded if I simply change that line to constraint to the parent element I get 678 calls to ATTR on all the same markup:

this.buttonElement = this.element.parent().find( "[for=" + this.element.attr("id") + "]" );

Not sure what the best approach is to both remain efficient and still get those weird cases when somebody puts their label element in the nav and their checkbox in the footer. Maybe add an option to pin a label/trigger element or something like that. Or possibly finding the labels instead of the input and using the for attributes to pinpoint the inputs. (which would work, but is a little confusing to users)

[paul.irish]

At the very least we can limit it to an input nodeName That will clear up >90% of this overhead.

[paul.irish]

Replying to paul.irish:

At the very least we can limit it to an input nodeName

er.. label. :)

[mkhpalm]

Can also prefer the input title attribute if exists. If it does skip looking for a label[for] to build the span overlay. Would give people a w3c compatible way out of long script errors if they have a lot of markup but still want to use radio or checkbox ui.buttons.

[Scott González]

Duplicate of #5454.