ID jquery có dấu cách

Có ai biết cách chọn một mục trong DOM bằng ID bằng jQuery không, khi ID đó có khoảng trắng?

Ví dụ: ID của mặt hàng của tôi sẽ là

<div id="content Module">Stuff</div>

Làm cách nào để chọn cái này với jQuery?

Nếu tôi chỉ làm

$("#content Module").whatever() 

jQuery sẽ cố gắng tìm một mục có cả ID nội dung và ID của Mô-đun, đây không phải là thứ tôi đang tìm kiếm.

Tôi nên thêm rằng tôi đang làm việc với một cơ sở mã cũ, nơi hai id từ này được sử dụng rộng rãi, vì vậy việc đi qua và thay đổi tất cả các ID sẽ rất tệ.

Sử dụng bộ chọn thuộc tính.

$("[id='content Module']").whatever();

Hoặc, tốt hơn, chỉ định thẻ là tốt:

$("div[id='content Module']").whatever();

Lưu ý rằng không giống như $ ('# id'), điều này sẽ trả về nhiều yếu tố nếu bạn có nhiều yếu tố có cùng một id trong trang của mình.

Không sử dụng khoảng trắng, lý do cho điều này là đơn giản, ký tự khoảng trắng không phải là một thuộc tính hợp lệ cho ID.

Mã thông báo ID phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể được theo sau bởi bất kỳ số lượng chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_"), dấu hai chấm (":") và dấu chấm (".").

Nhưng nếu bạn không quan tâm đến các tiêu chuẩn hãy thử $("[id='content Module']")

Chủ đề tương tự> Giá trị hợp lệ cho thuộc tính id trong HTML là gì?

Chỉnh sửa: Id khác nhau như thế nào giữa HTML 4.01 và HTML5

HTML5 được loại bỏ các hạn chế bổ sung đối với thuộc tính id. Các yêu cầu duy nhất còn lại - ngoài việc là duy nhất trong tài liệu - là giá trị phải chứa ít nhất một ký tự (không thể để trống) và không thể chứa bất kỳ ký tự khoảng trắng nào.

Liên kết: http://mathiasbynens.be/notes/html5-id- class

Chỉ trong trường hợp bất kỳ ai tò mò, tôi thấy rằng thoát khỏi không gian sẽ hoạt động. Điều này đặc biệt hữu ích khi bạn không có quyền kiểm soát DOM mục tiêu (ví dụ: từ trong bản mô tả người dùng):

$("#this\\ has\\ spaces");

Lưu ý dấu gạch chéo kép, được yêu cầu.

Phương thức mà Chris đề xuất có thể có khả năng được điều chỉnh để hoạt động với các hàm jQuery.

var element = document.getElementById('content Module');
$(element) ... ;

Một ý tưởng để thử:

$("#content" +   + "Module").whatever()

$("#content" + %20 + "Module").whatever()

Dấu chấm phẩy có thể gây ra lỗi javascript. Tôi cũng khuyên bạn nên thay đổi ID để không có bất kỳ khoảng trắng nào.

Cũng cố gắng document.getElementByID("content Module")

Điều này làm việc cho tôi.

document.getElementById(escape('content Module'));

Mặc dù về mặt kỹ thuật không có khoảng trống trong giá trị thuộc tính ID trong HTML , bạn thực sự có thể chọn nó bằng jQuery.

Xem http://otherseffingcsosescapes.com/#content%20module :

<script>
  // document.getElementById or similar
  document.getElementById('content module');
  // document.querySelector or similar
  $('#content\\ module');
</script>

jQuery sử dụng cú pháp giống như API Selector, vì vậy bạn có thể sử dụng $('#content\\ module');để chọn phần tử với id="content module".

Để nhắm mục tiêu phần tử trong CSS, bạn có thể thoát nó như thế này:

<style>
  #content\ module {
    background: hotpink;
  }
</style>

điều này có thể hoạt động nếu bạn muốn phần tử có giá trị chính xác cho id

$("[id='content Module']").whatever();

nhưng nếu bạn muốn kiểm tra xem phần tử chỉ có một trong số chúng (giống như lớp) có hoặc không có id khác

$("[id~='content']").whatever();

điều này sẽ chọn một thành phần nếu nó có id="content"hay id="content Module"hayid="content Module other_ids"

Tôi đã tìm thấy trường hợp của mình rằng lối thoát không hoạt động vì nó thay thế khoảng trắng bằng% 20. Tôi đã sử dụng thay thế, ví dụ, để thay thế h1 của trang bằng văn bản của một mục danh sách. Nếu menu chứa:

<li id="Contact Us"\>Contact Us</li>

function setTitle(menu) {
    $("h1").text( $("li#" + menu.replace(" ", "\\ ")).text() );
}

Tôi đã gặp vấn đề với id phần tử có chứa dấu phẩy và / hoặc dấu cách trong jQuery, vì vậy tôi đã làm điều này và nó hoạt động như một bùa mê:

var ele = $(document.getElementById('last, first'));

Điều này có không gian và không hoạt động:

var ele = $('#last, first');

Điều này có dấu phẩy và không hoạt động:

var ele = $('#last,first');

Thoát khỏi bất kỳ ký tự linh tinh nào trên bộ chọn (cùng với khoảng trắng) .

var escapeSelector = function(string) {
  string = string||"";
  if (typeof string !== 'string') return false;
    return string.replace( /(:|\.|\[|\]|,|=|@|\s|\(|\))/g, "\\$1" );

}
console.log($("div[data-id="+escapeSelector("Document (0).json")+"]").text());   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-id="Document (0).json">Howdy</div>