Bagaimana cara memilih html node berdasarkan ID dengan jquery ketika id berisi titik?

Jika html saya terlihat seperti ini:

<td class="controlCell">
    <input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" />
</td>

Bagaimana saya bisa memilih # SearchBag.CompanyName dengan JQuery? Saya tidak bisa membuatnya bekerja dan saya khawatir titik itulah yang menghancurkan semuanya. Yang menjengkelkan adalah bahwa mengubah nama semua id saya akan menjadi banyak pekerjaan, belum lagi hilangnya keterbacaan.

Catatan:
Tolong jangan mulai berbicara tentang bagaimana tabel tidak dibuat untuk lay-out. Saya sangat menyadari nilai dan kekurangan CSS dan berusaha keras untuk menggunakannya sebanyak mungkin.

@Tomalak dalam komentar:

karena pemilih ID harus didahului dengan hash #, seharusnya tidak ada ambiguitas di sini

"# Id.class" adalah pemilih yang valid yang membutuhkan id dan kelas terpisah untuk mencocokkan; ini valid dan tidak selalu sepenuhnya berlebihan.

Cara yang benar untuk memilih literal '.' di CSS adalah untuk menghindarinya: "#id \ .moreid". Ini digunakan untuk menyebabkan masalah di beberapa browser lama (khususnya IE5.x), tetapi semua browser desktop modern mendukungnya.

Metode yang sama tampaknya berfungsi di jQuery 1.3.2, meskipun saya belum mengujinya secara menyeluruh; quickExpr tidak mengambilnya, tetapi parser pemilih yang lebih terlibat tampaknya benar:

$('#SearchBag\\.CompanyName');

Satu varian adalah ini:

$("input[id='SearchBag.CompanyName']")

Anda tidak perlu melarikan diri apa pun jika menggunakan document.getElementById:

$(document.getElementById('strange.id[]'))

getElementById mengasumsikan input hanya atribut id, sehingga titik tidak akan ditafsirkan sebagai pemilih kelas.

Jawaban Singkat : Jika Anda memiliki elemen dengan id = "foo.bar", Anda dapat menggunakan pemilih$("#foo\\.bar")

Jawaban yang Lebih Panjang : Ini adalah bagian dari dokumentasi jquery - penyeleksi bagian yang dapat Anda temukan di sini: http://api.jquery.com/category/selectors/

Pertanyaan Anda dijawab tepat di awal dokumentasi:

Jika Anda ingin menggunakan salah satu meta-karakter (seperti 
! "# $% & '() * +,. /:;? @ [\] ^` {|} ~) 
sebagai bagian literal dari sebuah nama, Anda harus melarikan diri dari karakter tersebut 
dua backslash: \\. Misalnya, jika Anda memiliki elemen dengan id = "foo.bar",
Anda dapat menggunakan pemilih $ ("# foo \\. bar"). Spesifikasi W3C CSS berisi
seperangkat aturan lengkap tentang pemilih CSS yang valid. Juga bermanfaat adalah
entri blog oleh Mathias Bynens pada urutan pelarian karakter CSS untuk pengidentifikasi.

pemilihan attr tampaknya sesuai ketika ID Anda dalam variabel:

var id_you_want='foo.bar';
$('[id="' + id_you_want + '"]');

Hal ini didokumentasikan dalam API jQuery penyeleksi :

Untuk menggunakan salah satu meta-karakter (seperti !"#$%&'()*+,./:;<=>?@[\]^`{|}~) sebagai bagian literal dari sebuah nama, itu harus melarikan diri dengan dengan dua backslashes: \\. Misalnya, elemen dengan id="foo.bar", dapat menggunakan pemilih $("#foo\\.bar").

Singkatnya, awali .dengan \\.

$('#SearchBag\\.CompanyName')

Masalahnya adalah bahwa .akan cocok dengan kelas, jadi $('#SearchBag.CompanyName')akan cocok <div id="SearchBag" class="CompanyName">. Orang yang melarikan diri \\.akan diperlakukan sebagai orang normal .tanpa arti khusus, cocok dengan ID yang Anda inginkan.

Ini berlaku untuk semua karakter !"#$%&'()*+,./:;<=>?@[\]^`{|}~yang seharusnya memiliki arti khusus sebagai pemilih di jQuery.

Guys yang mencari solusi yang lebih umum, saya menemukan satu solusi yang menyisipkan satu garis miring ke belakang sebelum karakter khusus, ini menyelesaikan masalah terkait dengan mengambil nama & ID dari div yang berisi karakter khusus.

"Str1.str2% str3" .replace (/ [^ \ w \ s] / gi, '\\ $ &')

mengembalikan "Str1 \\. str2 \\% str3"

Semoga ini bermanfaat!

Anda dapat menggunakan pemilih atribut:

$("[id='SearchBag.CompanyName']");

Atau Anda dapat menentukan jenis elemen:

$("input[id='SearchBag.CompanyName']");