идентификаторы jquery с пробелами

Question

Кто-нибудь знает, как выбрать элемент в DOM по идентификатору с помощью jQuery, когда этот идентификатор имеет пробел?

Например, идентификатор моего предмета будет

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

Как бы я выбрал это с JQuery?

Если я просто сделаю

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

jQuery попытается найти элемент с идентификатором контента и идентификатором модуля, а это не то, что я ищу.

Я должен добавить, что я работаю со старой базой кода, в которой эти два идентификатора слова используются широко, так что проходить и менять все идентификаторы было бы плохо.

Answer 1

Использовать селектор атрибута.

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

Или, лучше, также указать тег:

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

Обратите внимание, что в отличие от $ ('# id'), это вернет несколько элементов, если у вас есть несколько элементов с одинаковым идентификатором на вашей странице.

Answer 2

Не используйте пробелы, причина этого проста, пробел не является допустимым для атрибута ID.

ID токены должны начинаться с буквы ([A-Za-z]) и может сопровождаться любым количество букв, цифр ([0-9]), дефисы ("-"), подчеркивания ("_"), двоеточия (":") и точки (".").

Но если вас не интересуют стандарты, попробуйте $("[id='content Module']")

Аналогичная тема> Какие допустимые значения для атрибута id в HTML?

Редактировать: Чем отличается идентификатор между HTML 4.01 и HTML5

HTML5 избавляет от дополнительных ограничений на атрибут id. только оставшиеся требования - кроме уникальности в документе - что значение должно содержать хотя бы один символ (не может быть пустым), и что он не может содержать пробелов.

Ссылка: http://mathiasbynens.be/notes/html5-id-class

Answer 3

На всякий случай, если кому-то интересно, я обнаружил, что выход из космоса будет работать и, вероятно, работает лучше всего. Это особенно полезно, когда у вас нет контроля над целевой DOM (то есть пользовательским скриптом):

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

Обратите внимание на двойной обратный слеш, который требуется.

Answer 4

Метод, предложенный Крисом, может быть адаптирован для работы с функциями jQuery.

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

Answer 5

Идея попробовать:

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

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

Точка с запятой может вызвать ошибку JavaScript. Я также рекомендую изменить идентификатор, чтобы не было пробелов.

Также попробуйте document.getElementByID("content Module")

Answer 6

Это сработало для меня.

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

Answer 7

Экранирование любого разного символа в селекторе (вместе с пробелами) .

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>

Answer 8

У меня были проблемы с идентификаторами элементов, содержащими запятые и / или пробелы в jQuery, поэтому я сделал это, и это сработало как чудо:

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

Это пробелы и не работает:

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

Это запятая и не работает:

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

Answer 9

В моем случае я обнаружил, что escape не работает, поскольку он заменяет пробелы на% 20. Я использовал заменить вместо, например. заменить h1 страницы текстом элемента списка. Если меню содержит:

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

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

Answer 10

это может сработать, если вы хотите, чтобы элемент имел точное значение для идентификатора

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

но если вы хотите проверить, есть ли у элемента только один из них (как у класса) с или без других идентификаторов

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

это выберет элемент, если он имеет id="content" или id="content Module" или id="content Module other_ids"