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和iterating方法？我正在使用'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);

Answer 2

正如猜测一样，但我会尝试将change事件绑定到所有input元素，并在调用事件时过滤它们：

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

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

Answer 3

您可以使用：

$('input[name$="[car_id]"]').change(function(){
  // codes
});

属性包含Selector *替代

3 个答案: