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

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

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

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

Как мне выбрать это с помощью jQuery?

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

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

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

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

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

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

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

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

Обратите внимание, что в отличие от $ ('# 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

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

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

Обратите внимание на двойную обратную косую черту, которая обязательна.

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

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

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

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

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

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

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

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

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

Хотя технически недопустимо иметь пробел в значении атрибута ID в HTML , на самом деле вы можете выбрать его с помощью jQuery.

См. Http://mothereffingcssescapes.com/#content%20module :

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

jQuery использует синтаксис, подобный Selectors API, поэтому вы можете использовать $('#content\\ module');для выбора элемента с помощьюid="content module" .

Чтобы настроить таргетинг на элемент в CSS, вы можете избежать его следующим образом:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>