javascript - 属性包含选择器 * 备选

Question

注意:使用 jQuery 1.3.2(是的，我正在升级，但为此仍然需要 1.3.2)

寻找更好的方法来实现这一点

HTML 元素(这来自自定义 PHP 框架，更改起来非常麻烦):

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

我可以动态添加另一个下拉列表，如下所示:

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

和

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

现在我像这样遍历它们:

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

关于更改选择:

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

是否有更好的方法来实现 on change 和 iteration 方法？我正在使用“Attribute Contains Selector”(http://api.jquery.com/attribute-contains-selector/)，但看起来它在 on change 事件中引起了很大的性能问题。

更新:

我用 $ 替换了 * 以搜索最后一部分，这(我认为)确实对性能有一点帮助，但仍在寻找这是否是最佳解决方案

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

Answer 1

性能问题出在您的 showCarinfo 函数中。您正在循环执行 DOM 选择。

不要那样做。而是缓存选择...

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

---

或者你可以使用.each()

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

---

此外，如果处理程序唯一要做的就是调用该函数，那么一个小的优化就是这样做...

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