jQuery selection by pattern

Question

I have a table of form elements where each row represents a record and column represents a field. I need to select all form elements in a given column.

Form elements in the same column have the same name format. For example, form elements that represent a location would have a name in the format record*.location, where * is an index.

Is it possible to select them with a single jQuery selection? If so, how does it compare to doing document.getElementById() on each one of them in a loop, performance wise?

what defines which column to you need to get? an event from one of the form elements, or something else? — Stephen
– Stephen, Commented Feb 21, 2011 at 3:26
any chance of seeing an example of the HTML??? There could be a really simple answer to this one. — Damien Quintal
– Damien Quintal, Commented Feb 21, 2011 at 3:27

JAAulde · Accepted Answer · 2011-02-21 03:51:08Z

4

Use jQuery's custom selector creation, $.expr. I have an example for you at http://jsfiddle.net/ygSAy/

You'll want to limit use of it to specific contexts unless you really work to make the filter function super efficient.

Edit: a commented and slightly better performant version: http://jsfiddle.net/ygSAy/2/

edited Feb 21, 2011 at 3:51

answered Feb 21, 2011 at 3:36

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user113716 · Accepted Answer · 2011-02-21 04:11:24Z

4

var locations = $('td :input[name$="\\.location"]')

This uses the attribute-ends-with-selector^(docs) and will select all elements that end with .location.

Ultimately if you're concerned about performance, you can do your own selection like this:

function selectInputs( el, type ) {
    var arr = [],
        inputs = document.getElementById( el ).getElementsByTagName( 'input' ),
        len = inputs.length;
    while( len-- ) {
        if( inputs[len].name.indexOf( type ) > -1 ) {
            arr.push( inputs[len] );
        }
    }
    return arr;
}

var locations = selectInputs( 'myTable', '.location' );

You could cache away the DOM selection if elements are not added dynamically. You may want to do that whether or not you use jQuery.

edited Feb 21, 2011 at 4:11

answered Feb 21, 2011 at 3:38

user113716

323k64 gold badges454 silver badges441 bronze badges

11 Comments

Tom Tucker Over a year ago

Thanks, but I need to select all elements with that name pattern, from zero to the last index, say 10, not just a single element,

user113716 Over a year ago

@Tom: Ah, I misunderstood. I'll change my answer.

user113716 Over a year ago

@Tom: I updated to select all elements that end with .location. Is this what you meant? Or did it need to be on a per-row basis?

JAAulde Over a year ago

Patrick, the only issue here is if he has other things using '.location' at the end of the name. I have no idea if that could be the case, though.

user113716 Over a year ago

@JAAulde: That's not necessarily true. jQuery uses the native querySelectorAll when it's available, which is very fast. I'd bet that a single getElementsByTagName() followed by a filter will perform a better in IE than many individual getElementById calls.

|

Collectives™ on Stack Overflow

jQuery selection by pattern

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related