jQuery :contains() 选择器大写和小写问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8746882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery :contains() selector uppercase and lower case issue
提问by Nerudo
My html looks like this
我的 html 看起来像这样
<input id="txt" value=""></input>
<div class="link-item">jK</div>
<div class="link-item">JFOO</div>
my js
我的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");
});
I'm looking to filter content dynamically on the client side. When I type a capital j, it only returns the second div whereas I want to get all div that contain j whether upper or lower case.
我希望在客户端动态过滤内容。当我输入大写 j 时，它只返回第二个 div，而我想获取包含 j 的所有 div，无论是大写还是小写。
回答by Highway of Life
You can change the .containsfilter to be case insensitive or create your own selector.
您可以将.contains过滤器更改为不区分大小写或创建自己的选择器。
jQuery.expr[':'].icontains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
This creates a new selector: icontains (or you could name it insensitive-contains, or whatever suits your fancy).
It's usage would be the same as contains: $('div:icontains("Stack")');would match:
这将创建一个新的选择器：icontains（或者您可以将其命名为 insensitive-contains，或者任何您喜欢的名称）。它的用法与 contains: 相同，$('div:icontains("Stack")');匹配：
<div>stack</div>
<div>Stack</div>
<div>StAcKOverflow</div>
Or override the existing .containsfilter:
或者覆盖现有的.contains过滤器：
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
With this in place,
有了这个，
$("div:contains('John')");
would select all three of these elements:
将选择所有三个元素：
<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>
回答by Adam Rackis
回答by Stefan
Here is my contribution, hope it helps :)
这是我的贡献，希望它有帮助:)
$('#txt').keyup(function() {
var query = $(this).val();
$("div.link-item")
.hide()
.filter(':contains("' + query + '")')
.show();
});
The :contains() selectoris case sensitive.
的：含有（）选择器是大小写敏感的。
The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof. As with attribute value selectors, text inside the parentheses of :contains() can be written as bare words or surrounded by quotation marks. The text must have matching case to be selected.
匹配的文本可以直接出现在所选元素中、该元素的任何后代中，或者它们的组合中。与属性值选择器一样，:contains() 括号内的文本可以写成裸词或用引号括起来。文本必须有匹配的大小写才能被选中。
Also created a demoif someone would like to try it out.
如果有人想尝试一下，还创建了一个演示。
UPDATE
更新
Sorry, must have misread your question.
对不起，一定是误读了你的问题。
Found this jQuery expression at http://bugs.jquery.com/ticket/278to create a new selector that is case insensitiveand I updated my demo.
在http://bugs.jquery.com/ticket/278找到这个 jQuery 表达式来创建一个不区分大小写的新选择器，我更新了我的演示。
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
回答by JaredPar
I don't believe there is a way to do this with a raw selector. The containsselector is case sensitive and there doesn't appear to be a case insensitive version. I think the best approach is to use a filter that manually queries the object
我不相信有一种方法可以使用原始选择器来做到这一点。该contains选择是区分大小写的，似乎没有成为一个区分大小写的版本。我认为最好的方法是使用手动查询对象的过滤器
var filt = function (unused) {
$(this).text().toLowerCase().indexOf(txtSearch.toLowerCase()) !== -1;
};
