如何使jQuery包含不区分大小写的内容,包括jQuery 1.8+?


91

我试图不区分大小写地使用“包含”大小写。我尝试在以下stackoverflow问题上使用该解决方案,但没有成功:

是否存在不区分大小写的jQuery:包含选择器?

为了方便起见,将解决方案复制到此处:

jQuery.extend(
        jQuery.expr[':'], { 
                Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});

这是错误:

Error: q is not a function
Source File: /js/jquery-1.4.js?ver=1.4
Line: 81

这是我正在使用的地方:

  $('input.preset').keyup(function() {
    $(this).next().find("li").removeClass("bold");
    var theMatch = $(this).val();
    if (theMatch.length > 1){
      theMatch = "li:Contains('" + theMatch + "')";
      $(this).next().find(theMatch).addClass("bold");
    }
  });

在相同的情况下,我对原始区分大小写的“包含”的使用没有任何错误。有人有什么想法吗?我会很感激的。


如果有人感兴趣,我已经在其他三个contains选择器中更新了我的博客文章:containsExact:containsExactCase并且:containsRegex选择器现在可以在所有版本的jQuery中使用。
Mottie 2012年


我认为.filter()是另一种好方法。参考
刘镇玱

Answers:


127

这就是我在当前项目中使用的,没有任何问题。看看这种格式是否能带来更好的运气:

jQuery.expr[':'].Contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

在jQuery 1.8中,对此的API进行了更改,而jQuery 1.8+版本将是:

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

您可以在这里进行测试。有关1.8+自定义选择器的更多详细信息,请在此处查看Sizzle Wiki


您是救生员。谢谢。
Matrym'2

3
您是否有机会确切地说出它在做什么?
安倍·米斯勒

4
@ClovisSix-感谢您的注意,我提供了一种1.8+的相同方法,如果您有任何麻烦,请告诉我。
尼克·克拉弗

1
要注意的是,这并不能代替:contains,而只是添加另一个选择器:Contains。
albanx 2014年

3
选择器应称为icontains或类似名称。
塞巴斯蒂安

43

值得注意的是,答案是正确的,但仅涵盖:Contains,而不是:contains可能导致意外行为的别名(或可能被设计用于需要敏感和不敏感搜索的高级应用程序)。

这可以通过复制别名的扩展名来解决:

jQuery.expr[':'].Contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};
jQuery.expr[':'].contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

花了我一段时间来弄清楚为什么它对我不起作用。


我会在上面对此发表评论,但是显然我无法。
Ellipsis

5
我不确定你在这里得到什么。这将覆盖预期的,已记录的行为:contains。我认为将原始文件保留下来:contains并调用新的选择器会更清楚:icontains
贾斯汀·力

5
那是我帖子的重点。创建一个替代选择器当然是一个有效的选择,但是我指出了extend:contains,但是忽略了extend:Contains会在产生不同结果时引起用户困惑。
Ellipsis,

1
然后,感谢您分享此“陷阱”。:)尽管如此,我还是想提一个好主意,那就是在构建无损并行行为的工作量较小时,最好不要覆盖内置行为。
贾斯汀·

我尝试了一些为此发布的不同解决方案,而这个解决方案终于奏效了。谢谢。
泰勒·米歇尔2014年


6

可能要晚了....但是

我更喜欢这样。

$.extend($.expr[":"], {
"MyCaseInsensitiveContains": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

这样,您就不会篡改jQuery的NATIVE'.contains' ...以后可能需要使用默认值...如果被篡改,您可能会发现自己回到了stackOverFlow ...


0

我会允许自己添加我的朋友:

$.expr[":"].containsNoCase = function (el, i, m) { 
    var search = m[3]; 
    if (!search) return false; 
    return eval("/" + search + "/i").test($(el).text()); 
}; 

0

使用下面的代码,我完全可以完全忽略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/

另外,如果您想使用:contains并进行一些搜索,则可能需要查看一下:http : //technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide-相应地

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.