jQuery:contains()选择器大写和小写问题

我的HTML看起来像这样

   

我的js

 $('#txt').keyup(function(){ var txtsearch = $('#txt').val(); var filt = $("div.link-item:contains('" + txtsearch +"')"); $("div.link-item").css("display", "none") .filter(filt) .css("display", "block"); }); 

我希望在客户端动态过滤内容。 当我输入大写字母j时,它只返回第二个div,而我想得到包含j的所有div,无论是大写还是小写。

您可以将.containsfilter更改为不区分大小写或创建自己的选择器。

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

这将创建一个新的选择器:icontains(或者您可以将其命名为insensitive-contains,或任何适合您的喜好)。 它的用法与contains相同: $('div:icontains("Stack")'); 会匹配:

 
stack
Stack
StAcKOverflow

或覆盖现有的.containsfilter:

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

有了这个,

 $("div:contains('John')"); 

将选择所有这三个元素:

 
john
John
hey hey JOHN hey hey

为什么不使用filter函数,并传入一个使用不区分大小写的正则表达式的函数?

 var filteredDivs = $("div.link-item").filter(function() { var reg = new RegExp(txtsearch, "i"); return reg.test($(this).text()); }); 

DEMO

这是我的贡献,希望它有帮助:)

 $('#txt').keyup(function() { var query = $(this).val(); $("div.link-item") .hide() .filter(':contains("' + query + '")') .show(); }); 

:contains()选择器区分大小写。

匹配文本可以直接出现在所选元素中,任何元素的后代中,或其组合中。 与属性值选择器一样,括号内的文本:contains()可以写成裸字或用引号括起来。 文本必须具有匹配的案例才能被选中

如果有人想尝试一下,还会创建一个演示 。

UPDATE

对不起,一定是误读了你的问题。

在http://bugs.jquery.com/ticket/278找到这个jQuery表达式来创建一个不区分大小写的新选择器,我更新了我的demo 。

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

我不相信有一种方法可以使用原始选择器。 contains选择器区分大小写,并且似乎没有不区分大小写的版本。 我认为最好的方法是使用手动查询对象的filter

 var filt = function (unused) { $(this).text().toLowerCase().indexOf(txtSearch.toLowerCase()) !== -1; };