代码之家 › 专栏 › 技术社区 › Tx3

编写jQuery选择器不区分大小写的版本

jquery-selectors jquery

Tx3 · 技术社区 · 15 年前

我正在使用以下行,我想使其不区分大小写:

var matches = $(this).find('div > span > div#id_to_find[attributeName ^= "filter"]');
if (matches.length > 0) {
}

我的问题是我怎样才能做选择器 ^= 不区分大小写?也许换成过滤器然后再换成regexp?

3 回复 | 直到 14 年前

lonesomeday 15 年前

要进行不区分大小写的属性选择,需要编写自定义选择器函数。

$.expr[':'].iAttrStart = function(obj, params, meta, stack) {
    var opts = meta[3].match(/(.*)\s*,\s*(.*)/);
    return (opts[1] in obj) && (obj[opts[1]].toLowerCase().indexOf(opts[2].toLowerCase()) === 0);
};

$('input:iAttrStart(type, r)')

这将匹配任何 input type 属性以 R 或 r (所以它会匹配 RADIO , radio , RESET 或 reset

关于这个函数很难理解的评论,我会解释一下。

$.expr[':'].iAttrStart = function(obj, params, meta, stack) {

这是创建自定义选择器的标准签名。

var opts = meta[3].match(/(.*)\s*,\s*(.*)/);

meta meta[3] 是作为参数传递的字符串。在我的例子中,这是 type, r . 正则表达式匹配和 右 另外。

return (opts[1] in obj) && (obj[opts[1]].toLowerCase().indexOf(opts[2].toLowerCase()) === 0);

此对象上存在请求的属性( opts[1] in obj )
搜索项(改为小写)位于元素属性值的最开始处,也改为小写。

我本可以使用jQuery语法而不是本机JS语法使这一点更易于阅读,但这意味着性能会降低。

Diego 15 年前

http://www.ericmmartin.com/creating-a-custom-jquery-selector/

您需要做的是创建一个自定义jquery选择器:

jQuery.extend(jQuery.expr[':'], {
    exactIgnoreCase: "(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase() == (m[3]).toLowerCase()"
});

然后使用它:

$("#detail select.fields option:exactIgnoreCase(" + q.val() + "):first");

awaage 15 年前

使用lonesomeday的答案时有一个小问题。

要重现错误,请尝试以下操作:

<meta content="Title of og tag" property="og:title" />

选择器:

$('meta:attrCaseInsensitive(property, og:site_name)')

这是行不通的。原因是当选择器代码到达语句时 (opts[1] in obj) 它将执行 ("property" in obj)

为了解决这个问题,我将最后一行改为使用jQuery的attr()方法

$.expr[':'].iAttrStart = function(obj, params, meta, stack) {
    var opts = meta[3].match(/(.*)\s*,\s*(.*)/);
    return (undefined != $(obj).attr(opts[1])) && (obj[opts[1]].toLowerCase().indexOf(opts[2].toLowerCase()) === 0)
};