Question

NOTE: using jQuery 1.3.2 (Yep I’m upgrading but still need to be at 1.3.2 for this)

Looking for a better way to implement this

HTML Element (This is coming from a custom PHP framework and is very cumbersome to make changes to):

<select id="car[0][car_id]" name="car[0][car_id]">
    ... 100+ options
</select>

I can add another drop down dynamically which looks like this:

<select id="car[1][car_id]" name="car[1][car_id]">
    ... 100+ options
</select>

and

<select id="car[2][car_id]" name="car[2][car_id]">
    ... 100+ options
</select>

Now I’m iterating through them like this:

function showCarinfo() {
    for ( var car_number = 0; $("#car\\["+car_number+"\\]\\[car_id\\]").length > 0; car_number++ ) {
        // do stuff
    }
}

on change selection:

$("input[name*=car_id]").change(function(){
    // display info for each car selected from each drop down select menu
    showCarinfo(); 
});

Is there a better way to implement the on change and iterating methods? I am using the ‘Attribute Contains Selector’ ( http://api.jquery.com/attribute-contains-selector/ ) but looks like it’s causing a big performance issue with the on change event.

UPDATE:

I’ve replaced the * with $ to search the last part and this (I think) does help with performance a little but still looking if this is the best solution

$("input[name$=car_id]").change(function(){
    // display info for each car selected from each drop down select menu
    showCarinfo(); 
});

Answer 1

The performance issue is in your showCarinfo function. You’re preforming DOM selection in a loop.

Don’t do that. Instead cache the selection…

function showCarinfo() {
    var cars = $("input[name*=car_id]");
    for ( var car_number = 0; car_number < cars.length; car_number++ ) {
        cars.eq(i); // do stuff
    }
}

---

or you can use .each()

function showCarinfo() {
    $("input[name*=car_id]").each(function() {
        // do stuff
    });
}

---

Also, if the only thing the handler is doing is calling that function, a small optimization would be to do this…

$("input[name*=car_id]").change(showCarinfo);