1

注意：使用 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(); 
});

有没有更好的方法来实现改变和迭代方法？我正在使用“属性包含选择器”（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(); 
});
4

3 回答 3

2

性能问题在于您的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);
于 2012-04-30T17:25:18.313 回答
0

只是作为猜测，但我会尝试将change事件绑定到所有input元素并在调用事件时过滤它们：

$("input").change(function() {
  if ($(this).attr('name').indexOf('car_id') == 0) {
    showCarinfo();
  }
});

这样 jQuery 就不必阻止页面执行以将事件处理程序附加到基于选择器的元素。

于 2012-04-30T17:14:49.623 回答
0

你可以使用这个：

$('input[name$="[car_id]"]').change(function(){
  // codes
});
于 2012-04-30T17:20:42.387 回答