属性包含选择器 * 替代

Attribute Contains Selector * alternative

本文关键字：替代 选择器 包含 属性      更新时间：2023-09-26
注意：使用 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/），但看起来它会导致更改事件出现很大的性能问题。

更新：

我已经用 $ 替换了 * 来搜索最后一部分，这（我认为）确实对性能有所帮助，但仍在寻找这是否是最佳解决方案

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

性能问题出在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);

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

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

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

你可以使用这个：

$('input[name$="[car_id]"]').change(function(){
  // codes
});
相关文章：