Обработка двоеточия в идентификаторе элемента с помощью 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

в основном я выбрал 10'000 раз деления с двоеточием в идентификаторе - разными способами для достижения этого. Затем я сравнил результаты с выбором идентификатора без двоеточия, результаты довольно удивительны.

оставленное время в мс

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

как написано здесь

Если вы хотите использовать любой из метасимволов (например,! "# $% & '() * +,. / :; <=>? @ [] ^` {|} ~) В качестве литеральной части имя, вы должны экранировать символ с двумя обратными слешами: \. Например, если у вас есть элемент с id = "foo.bar", вы можете использовать селектор $ ("# foo \ .bar"). Спецификация CSS 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который содержит : (colon). Я попробовал \\& the, \3Aно ни один из них не работал.

Использование $('[id=id:with:colon]').