web-dev-qa-db-ja.com

jQueryでコロンを含むIDを選択する

私はサイト用に事前に作成されたモジュールに取り組んでおり、test:twoというIDの要素をターゲットにする必要があります。現在、この要素にはコロンが含まれているため、jQueryはおそらく「理解しやすい」ように「2」を疑似クラスと見なしています。 jQueryでこの要素をターゲットにする方法はありますか？

また、IDの変更はできません。私を信じてください。

私は例をまとめました：

$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$('#test:two').css('background','green');
<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>
javascriptjqueryidentifiercolon
41
Geoff

コロンをエスケープするだけで\\：

$('#test\\:two');

http://jsfiddle.net/zbX8K/3/

ドキュメントを参照してください：CSS表記で使用されている文字を含むIDで要素を選択するにはどうすればよいですか？。

76
Joseph Silber

From jQuery ID Selector docs ：

Idにピリオドやコロンなどの文字が含まれている場合は、 バックスラッシュでこれらの文字をエスケープする にする必要があります。

バックスラッシュ自体は文字列でエスケープする必要があるため、次のようにする必要があります。

_$("#test\\:two")
_
_$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$('#test\\:two').css('background','green');_
_<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>_

組み込みのCSS.escape(...)関数を使用するオプションも利用できるようになりました。これは、セレクター式の中で特別な意味を持つ可能性のある文字を処理します。

_$("#" + CSS.escape("test:two"))
_
_$('#test').css('background','red');
$(document.getElementById('test:two')).css('background','blue');
$("#" + CSS.escape("test:two")).css('background','green');_
_<script src="//code.jquery.com/jquery-1.6.3.js"></script>

<div id="test">test</div>
<div id="test:two">test two</div>_
13
Jeremy Banks

attribute equals selector を使用します。

$('[id="test:two"]')
11
Rocket Hazmat

属性セレクターを使用してみてください

$(document).ready(function() {
    $('div[id="test:two"]').each(function() {
       alert($(this).text());
    }); 
});

フィドル： http://jsfiddle.net/zbX8K/2/

7
JaredPar