Làm cách nào để chọn các nút html theo ID với jquery khi id chứa dấu chấm?

Nếu html của tôi trông như thế này:

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

Làm cách nào tôi có thể chọn # SearchBag.CompanyName với JQuery? Tôi không thể làm cho nó hoạt động và tôi sợ đó là dấu chấm phá vỡ tất cả. Điều khó chịu là việc đổi tên tất cả id của tôi sẽ rất nhiều việc, chưa kể đến việc mất khả năng đọc.

Lưu ý:
Xin vui lòng không bắt đầu nói về cách các bảng không được tạo ra để bố trí. Tôi rất ý thức về giá trị và những thiếu sót của CSS và cố gắng sử dụng nó nhiều nhất có thể.

@Tomalak trong ý kiến:

vì bộ chọn ID phải được bắt đầu bằng hàm băm #, nên không có sự mơ hồ ở đây

Một số bộ chọn hợp lệ yêu cầu cả id và một lớp riêng biệt để khớp; nó hợp lệ và không phải lúc nào cũng hoàn toàn dư thừa.

Cách chính xác để chọn một chữ '.' trong CSS là để thoát nó: xông #id \ .moreid. Điều này được sử dụng để gây rắc rối trong một số trình duyệt cũ hơn (đặc biệt là IE5.x), nhưng tất cả các trình duyệt máy tính để bàn hiện đại đều hỗ trợ nó.

Phương thức tương tự dường như hoạt động trong jQuery 1.3.2, mặc dù tôi chưa kiểm tra kỹ; quickExpr không chọn nó, nhưng trình phân tích bộ chọn liên quan nhiều hơn dường như làm cho nó đúng:

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

Một biến thể sẽ là:

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

Bạn không cần phải thoát bất cứ điều gì nếu bạn sử dụng document.getElementById:

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

getElementById giả sử đầu vào chỉ là một thuộc tính id, vì vậy dấu chấm sẽ không được hiểu là một bộ chọn lớp.

Trả lời ngắn : Nếu bạn có một phần tử có id = "foo.bar", bạn có thể sử dụng bộ chọn$("#foo\\.bar")

Trả lời dài hơn : Đây là một phần của tài liệu jquery - bộ chọn phần mà bạn có thể tìm thấy ở đây: http://api.jquery.com/carget/selector/

Câu hỏi của bạn được trả lời ngay khi bắt đầu tài liệu:

Nếu bạn muốn sử dụng bất kỳ ký tự meta nào (chẳng hạn như 
! "# $% & '() * + ,. /:;? @ [\] ^` {|} ~) 
Là một phần nghĩa đen của một cái tên, bạn phải thoát khỏi nhân vật với 
hai dấu gạch chéo ngược: \\. Ví dụ: nếu bạn có một phần tử có id = "foo.bar",
bạn có thể sử dụng bộ chọn $ ("# foo \\. bar"). Đặc tả CSS của W3C chứa
bộ quy tắc hoàn chỉnh về bộ chọn CSS hợp lệ. Cũng hữu ích là
mục nhập blog của Mathias Bynens về trình tự thoát ký tự CSS cho mã định danh.

lựa chọn attr có vẻ phù hợp khi ID của bạn ở trong một biến:

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

Điều này được ghi lại trong API bộ chọn jQuery :

Để sử dụng bất kỳ ký tự meta nào (chẳng hạn như !"#$%&'()*+,./:;<=>?@[\]^`{|}~) như một phần nghĩa đen của tên, nó phải được thoát bằng hai dấu gạch chéo ngược : \\. Ví dụ, một phần tử với id="foo.bar", có thể sử dụng bộ chọn $("#foo\\.bar").

Trong ngắn hạn, tiền tố .với \\.

$('#SearchBag\\.CompanyName')

Vấn đề là .sẽ phù hợp với một lớp, vì vậy $('#SearchBag.CompanyName')sẽ phù hợp <div id="SearchBag" class="CompanyName">. Việc thoát với \\.sẽ được coi là bình thường .không có ý nghĩa đặc biệt, phù hợp với ID bạn mong muốn.

Điều này áp dụng cho tất cả các ký tự !"#$%&'()*+,./:;<=>?@[\]^`{|}~có ý nghĩa đặc biệt như một bộ chọn trong jQuery.

Các bạn đang tìm kiếm giải pháp chung chung hơn, tôi đã tìm thấy một giải pháp chèn một dấu gạch chéo ngược trước bất kỳ ký tự đặc biệt nào, điều này giải quyết các vấn đề liên quan đến lấy tên & ID từ div có chứa các ký tự đặc biệt.

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

trả về "Str1 \\. str2 \\% str3"

Hy vọng điều này là hữu ích!

Bạn có thể sử dụng bộ chọn thuộc tính:

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

Hoặc bạn có thể chỉ định loại phần tử:

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