Обробка двокрапки в ідентифікаторі елемента з jQuery

Ми не можемо отримати доступ до елемента div з ідентифікатором "test: abc" в JS-коді за допомогою jQuery.

<div id="test:abc">

$('#test:abc') 

Це добре працює без товстої кишки. У нас немає контролю над створенням ідентифікаторів, оскільки він автоматично генерується в підформулях Тринідаду, оскільки він приєднує ідентифікатор підформи :до кожного елемента всередині нього.

Вам потрібно уникнути товстої кишки за допомогою двох зворотних нахилів:

$('#test\\:abc')

Коротко

$(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, який тестує та порівнює швидкість методів вибору ідентифікаторів з колонами

вам потрібно відкрити консоль firebug, щоб отримати результати.

Я перевірив це за допомогою firefox 10 та jquery 1.7.2

в основному я зробив кілька тисяч разів діва з двокрапкою в ід - з різними методами, щоб досягти цього. Тоді я порівнював результати з виділенням ідентифікатора, в ньому немає двокрапки, результати є досить дивними.

лівий час у мс-методі правого вибору

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

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

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


71 $("#nocolon")

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

особливо

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

приходить трохи як сюрприз

Очевидно, що це спрацьовує на товстій кишці, тому що jQuery намагається інтерпретувати її як селектор. Спробуйте скористатися засобом вибору атрибута id.

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

Я просто використовував би document.getElementByIdі передав результат jQuery()функції.

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

використовувати два нахили \\

DEMO

як написано тут

Якщо ви хочете використовувати будь-який з мета-символів (наприклад,! "# $% & '() * +,. /:; <=>? @ [] ^` {|} ~) Як буквальну частину name, ви повинні уникнути символу з двома зворотними косими рисами: \. Наприклад, якщо у вас є елемент з id = "foo.bar", ви можете використовувати селектор $ ("# foo \ .bar"). Специфікація CS3 W3C містить повне

Довідково

Посилаючись на відповідь Тоскана, я оновив його код, щоб зробити його трохи читабельнішим, а потім вивів на сторінку.

Ось посилання jbin: http://jsbin.com/ujajuf/14/edit .



Крім того, я запустив це з більшою кількістю ітерацій

Iterations:1000000

Results:    
12794   $("#annyoing\\:colon")
12954   $("[id='annyoing:colon']"
754 $(document.getElementById("annyoing:colon"))
3294    $("#nocolon")
13516   $("[id='nocolon']")

Навіть більше:

Iterations:10000000

Results:    
137987  $("#annyoing\\:colon")
140807  $("[id='annyoing:colon']"
7760    $(document.getElementById("annyoing:colon"))
32345   $("#nocolon")
146962  $("[id='nocolon']")

спробуйте використовувати $('#test\\:abc')

Цей синтаксис $('[id="test:abc"]') працював на мене. Я використовую Netbeans 6.5.1& він генерує компоненти, idщо містять a : (colon). Я спробував \\& the, \3Aале жоден з них не працював.

Використовуйте $('[id=id:with:colon]').