使用jQuery处理元素ID中的冒号

Question

我们无法使用jQuery在JS代码中访问ID为"test:abc"的div元素.

<div id="test:abc">

$('#test:abc') 

没有结肠,它工作正常.我们无法控制ID生成,因为它是在Trinidad子表单中自动生成的,因为它将子表单ID附加:到其中的每个元素.

Answer 1

你需要使用两个反斜杠来逃避冒号:

$('#test\\:abc')

Answer 2

简而言之

$(document.getElementById("test:abc")) 是你应该使用的.

说明:除了速度增益(见下文)外,它更容易处理.

示例:假设您有一个功能

   function doStuff(id){

       var jEle = $("#" + id); //is not safe, since id might be "foo:bar:baz" and thus fail. 
       //You would first have to look for ":" in the id string, then replace it

       var jEle = $(document.getElementById(id)); //forget about the fact 
      //that the id string might contain ':', this always works
    }

    //just to give an idea that the ID might be coming from somewhere unkown
    var retrievedId = $("foo").attr("data-target-id");
    doStuff(retrievedId); 

速度/计时

看看这个jsbin,它测试并比较ID与冒号的选择方法的速度

你需要打开你的firebug控制台来获得结果.

我用firefox 10和jquery 1.7.2测试了它

基本上我做了一个选择10'000次div的id冒号 - 用不同的方法来实现它.然后我将结果与没有冒号的ID选择进行比较,结果非常令人惊讶.

在ms右选择器方法中剩余时间

299 $("#annoying\\:colon")

302 $("[id='annoying:colon']"

20 $(document.getElementById("annoying:colon"))


71 $("#nocolon")

294 $("[id='nocolon']")

特别

  71 $("#nocolon") and
299 $("#annoying\\:colon")

有点意外

Answer 3

显然,它在冒号上绊倒,因为jQuery试图将其解释为选择器.尝试使用id属性选择器.

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

Answer 4

我会使用document.getElementById,并将结果传递给jQuery()函数.

var e = document.getElementById('test:abc');
$(e) // use $(e) just like $('#test:abc') 

Answer 5

使用两个反斜杠 \\

DEMO

如此处所写

如果你想使用任何元字符(例如!"#$%&'()*+,./:; <=>？@ [] ^`{|}〜)作为字面的一部分name,你必须用两个反斜杠转义字符:\.例如,如果你有一个id ="foo.bar"的元素,你可以使用选择器$("#foo\.bar").W3C CSS规范包含完整的

参考