ідентифікатори jquery з пробілами


127

Хтось знає, як вибрати елемент у DOM за ідентифікатором за допомогою jQuery, коли в цьому ідентифікаторі є пробіл?

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

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

Як би я вибрав це за допомогою jQuery?

Якщо я просто роблю

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

jQuery спробує знайти елемент як з ідентифікатором вмісту, так і з ідентифікатором модуля, який я не шукаю.

Варто додати, що я працюю зі старою базою коду, де ці два ідентифікатори слова широко використовуються, тому проходження та зміна всіх ідентифікаторів буде поганим.


@ Главич Усі ваші твердження правдиві. Однак новоприйнята відповідь буде кориснішою людям, яким справді потрібне це рішення. Для тих, хто насправді застряг, знаючи, як поводитися з просторами - це те, що їм дійсно потрібно.
— Джефф Девіс

Так, це правда, але у моїй відповіді також є рішення для ідентифікаторів з пробілами, це навіть
— закреслено

1
Заявка на правильне написання ідентифікаторів замість ідентифікаційних номерів. Вибачте, домашній улюбленець. І так, я знаю, що більшість людей використовують апостроф для множини абревіатур і скорочених слів, але це все ще схоже на продуктовий
— Хуан Мендес

Відповіді:


253

Використовуйте селектор атрибутів.

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

Або, краще, також вкажіть тег:

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

Зауважте, що на відміну від $ ('# id'), це поверне декілька елементів, якщо на вашій сторінці є кілька елементів з тим самим ідентифікатором.


1
навіть відповідь Главіча найкраща пропозиція. Я думаю, що ця відповідь вирішила проблему :)
— GusDeCooL

8
Це допомогло мені багато. Я читаю жахливий HTML через ajax і не маю контролю над структурою HTML або форматом ідентифікаторів. Їх посвідчення особи мають пробіли, тому відповідь Елліот надзвичайно допомагає, тоді як пропозиції Главіча взагалі не допомагають.
— розбивця дня

Дякую, чудова відповідь!
— alcfeoh

62

Не використовуйте пробіли, причина цього проста, пробільний символ не є дійсним для атрибута ID.

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

Але якщо ти не дбаєш про стандарти, спробуй $("[id='content Module']")

Подібна нитка> Які дійсні значення для атрибута id у HTML?

Редагувати: чим ідентифікатор відрізняється між HTML 4.01 та HTML5

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

Посилання: http://mathiasbynens.be/notes/html5-id-class


4
+1. Дотримуючись стандартів іменування, і тоді вам не доведеться придумувати обхідні шляхи, коли ви не будете дотримуватися їх.
— matt b

Це викликало ідею обрізання другого слова на дисплеї, щоб у мене були дійсні ідентифікатори. Подбайте про питання, дякую!
— Джефф Девіс

1
Тут ви цитуєте специфікацію HTML 4.01. Хоча досі не заборонено використовувати символи пробілу у значеннях атрибутів ID, HTML5 позбавляється більшості цих обмежень: mathiasbynens.be/notes/html5-id-class
— Mathias Bynens

2
Не кажіть людині пройти і зламати всю кодову базу старого проекту лише тому, що "стандарти".
— Щонайбільше

Смішно. Простори працюють просто чудово для більшості цілей, навіщо робити їх нестандартними?
— Lodewijk

23

На всякий випадок, коли комусь цікаво, я виявив, що втеча з космосу спрацює. Це особливо корисно, коли ви не маєте контролю над цільовим DOM (наприклад, зсередини користувача):

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

Зверніть увагу на подвійний нахил, який необхідний.


Потім до 4-х зворотних нахилів, якщо JavaScript сам по собі є рядковою константою в іншій мові.
— Brilliand

2
Тоді до 8 зворотних нахилів, якщо ця інша мова сама є
— струнною

1
Це має переповнення стека при рекурсивному
— Jeff Davis

7

Запропонований Кріс метод може бути адаптований для роботи з функціями jQuery.

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

1
А-а-а! Треба було прокрутити далі!
— gotomanners

2

Ідея спробувати:

$("#content" + &amp;#032; + "Module").whatever()

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

Точка з комою може спричинити помилку javascript. Я також рекомендую змінити ідентифікатор, щоб не було пробілів.

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


1
document.getElementByID дав би мені звичайний об'єкт, і тоді я не міг виконувати функції jQuery, які шукаю. Однак у подібних обставинах це було б добре вирішити.
— Джефф Девіс

1
Ви б не $(document.getElementByID("content Module"))дали об’єкту jquery?
— getomanners

1

Це працювало для мене.

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

0

Хоча технічно невірно мати пробіл у значенні атрибута 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 використовує синтаксис, схожий на API Selectors, тому ви можете $('#content\\ module');вибрати для цього елементid="content module" .

Щоб націлити на елемент у CSS, ви можете його уникнути так:

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

0

це може працювати, якщо ви хочете, щоб елемент мав точне значення для id

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

але якщо ви хочете перевірити, чи є в елементі лише один із них (як і клас) з іншими або без ідентифікаторів

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

це буде вибрати елемент , якщо він має id="content"або id="content Module"абоid="content Module other_ids"


0

Я виявив для мого випадку, що втеча не працює, оскільки він замінює пробіли на% 20. Я замість цього використовував заміну, наприклад, щоб замінити h1 сторінки текстом елемента списку. Якщо меню містить:

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

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

0

У мене виникли проблеми з ідентифікаторами елементів, що містять коми та / або пробіли в jQuery, тому я це зробив, і це спрацювало як шарм:

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

Тут є пробіли і не працює:

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

У ньому є кома і не працює:

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


0

Уникнення будь-яких символів різного характеру на селекторі (разом із пробілами) .

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>

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.