使用 jQuery 选择带有冒号的 ID

Question

我正在为一个网站开发一个预先编写的模块，并且我需要以 id test:two 为目标元素。现在，这个元素中有一个冒号，因此 jQuery 可以理解地将“two”视为伪类。有没有办法用 jQuery 来定位这个元素？

另外，无法更改 ID。相信我，如果可以的话我会的。

我整理了一个例子：

$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$('#test:two').css('background','green');

<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>

Answer 1

只需使用 \\ 转义冒号即可：

$('#test\\:two');

http://jsfiddle.net/zbX8K/3/

---

请参阅文档：如何通过 ID 选择具有 CSS 表示法中使用的字符的元素？。

Answer 2

来自 jQuery ID 选择器文档：

如果 ID 包含句点或冒号等字符，则必须用反斜杠转义这些字符.

由于反斜杠本身需要在字符串中转义，因此您需要执行以下操作：

$("#test\\:two")

$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$('#test\\:two').css('background','green');

<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>

您现在还可以选择使用内置的 CSS.escape(...) 函数，该函数负责处理选择器表达式内可能具有特殊含义的任何字符。

$("#" + CSS.escape("test:two"))

$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$("#" + CSS.escape("test:two")).css('background','green');

<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>

Answer 3

使用属性等于选择器。

$('[id="test:two"]')

Answer 4

尝试使用属性选择器

$(document).ready(function() {
    $('div[id="test:two"]').each(function() {
       alert($(this).text());
    }); 
});

小提琴： http://jsfiddle.net/zbX8K/2/