Does anyone know how to escape the square bracket character when setting a class name with jQuery?
在使用jQuery设置类名时，是否有人知道如何避免方括号字符?
Try the following:
试试以下:
$('#txtFirstname').addClass('test[someval]')
then
然后
$('#txtFirstname').attr('class')
you'll see the class is there.
你会看到课堂在那里。
Now try
现在试试
$('#txtFirstname').hasClass('test[someval]')
FAIL
失败
The only reason I can think of is the square brackets.
我能想到的唯一原因是方括号。
And I need these for my jQuery validation you see.
我需要这些来验证jQuery。
Any suggestions appreciated
任何建议赞赏
Cheers Duncan
邓肯干杯
4 个解决方案
#1
79
And lo, he searched for 12 hours for the answer, gave up and posted a question on SO, then within 2 seconds found the answer.
他找了12个小时才找到答案，放弃了，在上面贴了一个问题，然后在2秒内找到了答案。
I'll put it here for other less fortunate souls.
我把它放在这里给其他不幸的人。
Escape with TWO (2) backslashes.
用两下反斜杠逃脱。
http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/
#2
8
The introduction of jQuery API page gives the above explanation about this:
jQuery API页面的介绍给出了以上的解释:
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.
使用任何的元字符(例如! " # $ % &’()* +,/:;< = > ?@[]^ { | } ~)作为一个文字名称的一部分,它必须与两个反斜杠转义:\ \。
#3
4
If the selector is contained within a variable (or if you can get it into a variable), the code below may be helpful:
如果选择器包含在变量中(或者您可以将其放入变量中)，下面的代码可能会有所帮助:
selector_name = $this.attr('class');
//e.g selector_name = users[0][first:name]
escaped_selector_name = selector_name.replace(/(:|\.|\[|\])/g,'\\$1');
//e.g escaped_selector_name = users\\[0\\]\\[first\\:name\\]
In short we prefix all special characters with double backslash. Here's some additional documentation from the jQuery site:
简而言之，我们用双反斜杠前缀所有特殊字符。以下是jQuery站点的一些附加文档:
http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/
#4
-2
To however googles here: don't get scared by the negative score, this is the only correct answer so far and I provide enough evidence to support it. I guess confusion came because the original question title was misleading and most people did not really read the whole question.
然而，在这里谷歌一下:不要被消极的分数吓到，这是目前为止唯一正确的答案，我提供了足够的证据来支持它。我猜是困惑来了，因为最初的题目是误导人的，大多数人并没有真正读懂整个问题。
I had a hard time trying to reproduce the issue described in the question. With this HTML:
我费了好大的劲才把问题重新写出来。这个HTML:
<div id="txtFirstname"></div>
... I composed the simplest test case:
…我编写了最简单的测试用例:
jQuery(function($){
$('#txtFirstname').addClass('test[someval]');
console.log( $('#txtFirstname').attr('class') );
console.log( $('#txtFirstname').hasClass('test[someval]') );
});
... and got the expected answer:
…得到了预期的答案:
"test[someval]"
true
Here's an online demo with jQuery/1.8. I couldn't reproduce it until I tried an older jQuery release. So, apparently, it was a bug that was fixed on jQuery/1.4.0. I found a ticket that seems related to this (though it's tagged as being fixed on 1.4.2 rather than 1.4.0).
这是一个jQuery/1.8的在线演示。我无法复制它，直到我尝试了一个旧的jQuery发行版。显然，这是一个在jQuery/1.4.0上修复的错误。我发现了一张与此相关的票(尽管它被标记为固定在1.4.2而不是1.4.0)。
While you certainly need to quote or escape metacharacters with \\ in order to use them as a literal part of a name, that rule applies to selectors. However, the .hasClass() method does not receive a selector as argument but as class name:
虽然您当然需要引用或转义元字符，以便将它们用作名称的文字部分，但该规则适用于选择器。然而，.hasClass()方法不接收选择器作为参数，而是作为类名:
.hasClass( className ) className Type: String The class name to search for.
Thus escaping is not required.
因此不需要转义。
#1
79
And lo, he searched for 12 hours for the answer, gave up and posted a question on SO, then within 2 seconds found the answer.
他找了12个小时才找到答案，放弃了，在上面贴了一个问题，然后在2秒内找到了答案。
I'll put it here for other less fortunate souls.
我把它放在这里给其他不幸的人。
Escape with TWO (2) backslashes.
用两下反斜杠逃脱。
http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/
#2
8
The introduction of jQuery API page gives the above explanation about this:
jQuery API页面的介绍给出了以上的解释:
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.
使用任何的元字符(例如! " # $ % &’()* +,/:;< = > ?@[]^ { | } ~)作为一个文字名称的一部分,它必须与两个反斜杠转义:\ \。
#3
4
If the selector is contained within a variable (or if you can get it into a variable), the code below may be helpful:
如果选择器包含在变量中(或者您可以将其放入变量中)，下面的代码可能会有所帮助:
selector_name = $this.attr('class');
//e.g selector_name = users[0][first:name]
escaped_selector_name = selector_name.replace(/(:|\.|\[|\])/g,'\\$1');
//e.g escaped_selector_name = users\\[0\\]\\[first\\:name\\]
In short we prefix all special characters with double backslash. Here's some additional documentation from the jQuery site:
简而言之，我们用双反斜杠前缀所有特殊字符。以下是jQuery站点的一些附加文档:
http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/
#4
-2
To however googles here: don't get scared by the negative score, this is the only correct answer so far and I provide enough evidence to support it. I guess confusion came because the original question title was misleading and most people did not really read the whole question.
然而，在这里谷歌一下:不要被消极的分数吓到，这是目前为止唯一正确的答案，我提供了足够的证据来支持它。我猜是困惑来了，因为最初的题目是误导人的，大多数人并没有真正读懂整个问题。
I had a hard time trying to reproduce the issue described in the question. With this HTML:
我费了好大的劲才把问题重新写出来。这个HTML:
<div id="txtFirstname"></div>
... I composed the simplest test case:
…我编写了最简单的测试用例:
jQuery(function($){
$('#txtFirstname').addClass('test[someval]');
console.log( $('#txtFirstname').attr('class') );
console.log( $('#txtFirstname').hasClass('test[someval]') );
});
... and got the expected answer:
…得到了预期的答案:
"test[someval]"
true
Here's an online demo with jQuery/1.8. I couldn't reproduce it until I tried an older jQuery release. So, apparently, it was a bug that was fixed on jQuery/1.4.0. I found a ticket that seems related to this (though it's tagged as being fixed on 1.4.2 rather than 1.4.0).
这是一个jQuery/1.8的在线演示。我无法复制它，直到我尝试了一个旧的jQuery发行版。显然，这是一个在jQuery/1.4.0上修复的错误。我发现了一张与此相关的票(尽管它被标记为固定在1.4.2而不是1.4.0)。
While you certainly need to quote or escape metacharacters with \\ in order to use them as a literal part of a name, that rule applies to selectors. However, the .hasClass() method does not receive a selector as argument but as class name:
虽然您当然需要引用或转义元字符，以便将它们用作名称的文字部分，但该规则适用于选择器。然而，.hasClass()方法不接收选择器作为参数，而是作为类名:
.hasClass( className ) className Type: String The class name to search for.
Thus escaping is not required.
因此不需要转义。