使用 jQuery 选择带有冒号的 ID

IT技术 javascript jquery identifier colon
2021-03-01 12:35:29

我正在为一个站点开发一个预先编写的module,我需要定位一个带有 id 的元素test:two现在,该元素中有一个冒号,因此 jQuery 可能并且可以理解地将“二”视为伪类。有没有办法用 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>

4个回答

只需使用\\:转义冒号

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

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


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

来自jQuery ID Selector 文档

如果 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>

使用属性等于选择器

$('[id="test:two"]')
我的猜测是,这会比接受的答案表现更差。知道是不是这种情况?
2021-04-21 12:35:29
@Kip:可能,这只是另一个建议。
2021-05-13 12:35:29
谢谢,这有帮助。
2021-05-17 12:35:29

尝试使用属性选择器

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

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