不区分大小写的 jQuery 属性选择器答案

【问题标题】：Case insensitive jQuery attribute selector不区分大小写的 jQuery 属性选择器
【发布时间】：2013-10-28 05:05:09
【问题描述】：

我正在使用包含选择器$('[attribute*=value]')的属性执行以下操作

<input name="man-news">
<input name="milkMan">

<script>    
    $( "input[name*='man']").css("background-color:black");
</script>

这适用于第一个输入，但不适用于第二个输入，因为“Man”的大写字母为“M”

如何使$( "input[name*='man']") 成为不区分大小写的选择器？

【问题讨论】：

CSS selector case insensitive for attributes的可能重复
Case-insensitive attribute-value selector with Jquery的可能重复

标签： javascript jquery jquery-selectors

【解决方案1】：

最简单的方法是在选择器的正则表达式部分添加一个不区分大小写的标志“i”：

所以不是

$( "input[name*='man']")

你可以的

$( "input[name*='man' i]")

JS 小提琴：https://jsfiddle.net/uoxvwxd1/3/

【讨论】：

仅供参考：适用于 Chrome 53，但不适用于 IE 11，非常有趣，但并不理想
@Stan 这让我大吃一惊。我在 Chrome 和 IE11 中看到了不同的结果，我认为这不可能；一定还有其他区别。然后我看到了你的评论。我认为 jQuery 的全部意义在于浏览器独立性。当涉及到选择器语法等内部结构时，我特别希望这是真的。关于为什么存在这种差异或是否/在哪里记录了这种差异的任何想法？
@BlueMonkMN 已经一年了，我还没有重新测试，但我的猜测是 IE 的 REGEX 处理应该归咎于差异。
这个解决方案看起来很简单，但在我的情况下它给出了：jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: [name*='fund' i]
另外，请参阅有关属性选择器的 MDN 文档developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

【解决方案2】：

您可以随时使用.filter():

var mans = $('input').filter(function() {
    return $(this).attr('name').toLowerCase().indexOf('man') > -1;
});

mans.css('background-color', 'black');

这里的关键部分是toLowerCase()，它将name属性小写，允许您测试它是否包含man。

【讨论】：

【解决方案3】：

var control = $('input').filter(function() {
    return /*REGEX_VALUE*/i.test($(this).attr('id'));
});

*REGEX_VALUE* - 您要查找的值

我最终使用正则表达式来验证属性“ID”是否满足...如果您想查找某个匹配值或值、区分大小写或不区分大小写或某个范围的值，则正则表达式更加灵活...

【讨论】：

【解决方案4】：

我只是能够完全忽略 jQuery 的大小写敏感度来实现我想要使用下面的代码，

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
  return function( elem ) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});

您可以使用此链接根据您的 jQuery 版本查找代码， https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

还有一篇文章用 jQuery 做了很多好事：http://www.ultechspot.com/jquery/using-jquery-search-html-text-and-show-or-hide-accordingly

【讨论】：

【解决方案5】：

这适用于我使用 jQuery 并且如果我将项目添加到表中

    // check if item already exists in table
    var inputValue = $('#input').val(); // input
    var checkitem = $('#exampleTable td.value div.editable').filter(function() {

        //check each table's editable div matches the input value in lowercase 
        if ($(this).text().toLowerCase() === inputValue.toLowerCase()) {
            itemexists = true; 
        }   
    });

    if (itemexists) {
        alert("item exists in the table");
        return;
    }

【讨论】：

问题是不区分大小写的属性选择器。