jquery - 访问 id 中带有 '::' 的元素

Question

在以下小提琴中：http: //jsfiddle.net/Q9sHz/5/

我有一个<li>id 为“test1::newtest”

当我按下按钮 - 启用“Li Point1”时，<li>元素 Li Point1 仍然不可拖动，但如果我从 id 中删除 :: 就像小提琴一样：http: //jsfiddle.net/Q9sHz/6/ 当我点击按钮。

不允许在 ID 中包含“：”吗？

Answer 1

jQuery 使用冒号来构建选择器。例如$('.class:checked')或$('.class:hidden')

你需要像这样逃避冒号

test1\\:\\:newtest

来自 jQuery 常见问题

因为 jQuery 使用 CSS 语法来选择元素，所以一些字符被解释为 CSS 表示法。例如，除了字母、数字、连字符和下划线之外，ID 属性在首字母（az 或 AZ）之后还可以使用句点和冒号（请参阅 W3C 基本 HTML 数据类型）。冒号 (":") 和句点 (".") 在 jQuery 选择器的上下文中是有问题的，因为它们分别表示伪类和类。

为了告诉 jQuery 将这些字符按字面意思而不是 CSS 表示法来处理，必须通过在它们前面放置两个反斜杠来“转义”它们。

// Does not work
$("#some:id")

 // Works!
$("#some\\:id")

如何通过具有在 CSS 表示法中使用的字符的 ID 选择元素？

Answer 2

引用jQuery-FAQ：

冒号 (":") 和句点 (".") 在 jQuery 选择器的上下文中是有问题的，因为它们分别表示伪类和类。

为了告诉 jQuery 将这些字符按字面意思而不是 CSS 表示法来处理，必须通过在它们前面放置两个反斜杠来“转义”它们。

如您所见，您必须使用\\. 请参阅此工作示例。

Answer 3

工作演示 http://jsfiddle.net/Q9sHz/12/

您需要转义这些特殊字符\\:\\:才能为您解决问题。

代码

// when button clicked ...
$('#enable').click(function() {
    // also enable li tag with id test1
    $('#test1\\:\\:newtest').draggable('enable');
});

​

Answer 4

// set draggable functionality to all li tags
$('.myLi').draggable();
// disable all li tags which have the class disable
$('.disable').draggable('disable');

// when button clicked ...
$('#enable').click(function() {
    // also enable li tag with id test1
    $('#test1newtest').draggable('enable');
});