Обработка двоеточия в идентификаторе элемента с помощью jQuery

Мы не можем получить доступ к элементу div с идентификатором "test: abc" в JS-коде с помощью jQuery.

<div id="test:abc">

$('#test:abc')

Он отлично работает без двоеточия. У нас нет контроля над генерированием ID, поскольку он автоматически генерируется в подформатах Trinidad, потому что он прикрепляет идентификатор подформы с помощью : к каждому элементу внутри него.

Ответ 1

Вам нужно избежать двоеточия, используя две обратные черточки:

$('#test\\:abc')

Ответ 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, который проверяет и сравнивает скорость методов выбора идентификаторов с двоеточиями

вам нужно открыть консоль firebug, чтобы получить результаты.

Я тестировал его с помощью firefox 10 и jquery 1.7.2

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

левое время в мс правый селекторный метод

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

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

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


71 $("#nocolon")

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

особенно

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

приходит как сюрприз

Ответ 3

Он отключается в двоеточии, очевидно, потому что jQuery пытается интерпретировать его как селектор. Попробуйте использовать селектор атрибутов id.

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

Ответ 4

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

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

Ответ 5

используйте два обратных слэша \\

DEMO

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

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

Ссылка

Ответ 6

Ссылаясь на ответ Toskan, я обновил его код, чтобы сделать его более читаемым, а затем выводить на страницу.

Здесь ссылка 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']")

Ответ 7

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

Ответ 8

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

Ответ 9

Используйте $('[id=id:with:colon]').