如何用jQuery选择具有特定maxlength属性值的input:text元素？

嘿，我来帮你搞定这个小问题！你用$('input:text[maxlength=36]')选不到目标元素，其实大概率是两个小细节没注意到，咱们一步步来解决：

可能的原因与解决方案 #

1. 属性值未加引号导致解析问题 #

虽然jQuery允许不带引号的数值型属性值，但部分浏览器或场景下，直接写maxlength=36可能会被解析异常。给属性值加上双引号（或单引号）就能解决：

// 推荐写法：给属性值加双引号
var mi = $('input:text[maxlength="36"]');

// 或者用单引号（注意转义如果在字符串里）
var mi = $('input:text[maxlength=\'36\']');

2. 代码执行时机不对（DOM未加载完成） #

如果你的代码是在DOM还没完全渲染的时候运行的，那选择器自然找不到元素。一定要把代码包裹在$(document).ready()里，确保DOM加载完成后再执行：

$(document).ready(function() {
    console.log('-- start --');
    var inputs = $('input:text');
    var i, myinput;
    console.log(inputs.length);
    for (i = 0; i < inputs.length; i++) {
        console.log(inputs[i]);
        if (inputs[i].maxLength == 36) {
            myinput = inputs[i];
            // break;
        }
    }
    console.log('-- myinput --');
    console.log(myinput);
    console.log('=============');
    console.log('-- mi --');
    var mi = $('input:text[maxlength="36"]'); // 修正后的选择器
    console.log(mi);
    console.log('-- end --');
});

3. 备选方案：用.filter()方法替代属性选择器 #

如果上面的方法还是不行，你可以用filter()方法，直接复用你循环里的逻辑（检查DOM元素的maxLength驼峰属性），这种方式更灵活也更可靠：

var mi = $('input:text').filter(function() {
    // 和你循环里的判断逻辑完全一致
    return this.maxLength === 36;
});

为什么循环能找到而选择器不行？ #

你循环里访问的是DOM元素的**maxLength（驼峰）属性**，这是JS操作DOM时的标准属性名；而jQuery的属性选择器[maxlength=36]匹配的是HTML标签里的**maxlength（小写）属性**。理论上两者是一一对应的，但如果元素是动态生成的，或者浏览器有微小的解析差异，就会出现选择器失效的情况。用filter()或者给属性值加引号，就能避开这些坑。

内容的提问来源于stack exchange，提问作者0617