Знайти елемент DOM за ідентифікатором, коли ID містить квадратні дужки?


77

У мене є елемент DOM з ідентифікатором, подібним до:

something[500]

який був побудований моїм додатком Ruby on Rails. Мені потрібно мати можливість отримати цей елемент через jQuery, щоб я міг пройти шлях по DOM, щоб видалити батька батьківського елемента, який має ідентифікатор змінної, до якого я не маю доступу заздалегідь.

Хтось знає, як я міг би цим займатися? Здається, такий код не працює:

alert($("#something["+id+"]").parent().parent().attr("id"));

При подальшому огляді:

$("#something["+id+"]")

повертає об'єкт, але коли я запускаю на ньому ".html ()" або ".text ()", результат завжди є нульовим або просто порожнім рядком.


2
На додаток до правильної відповіді (яка полягає в тому, що вам потрібно уникнути дужок з подвійними зворотними скісними рисками), ви дійсно повинні використовувати найближчі () замість кількох батьківських () викликів. Він чистіший і менше шансів зламатися, якщо рівень зміниться ... Отже, якщо ви намагаєтесь отримати найближчий div, ви робите .closest ('div') або навіть краще .closest ('div.meaningfulclassthatiwant')
Паоло Бергантіно

Дякую за пропозицію Паоло, але, як я вже згадував, я не знаю ідентифікатор / клас батька, якого я шукаю, заздалегідь, і оскільки обидва батьки є divs, найближчі не працюють. Хоча дякую.
Mike Trpcic

Ах, вибачте, я не прочитав запитання, просто подивився на назву та код у ньому :) Здогадайтесь, це мені слугує.
Паоло Бергантіно

Відповіді:


108

Вам потрібно уникнути квадратних дужок, щоб вони не враховувались як селектори атрибутів. Спробуйте це:

alert($("#something\\["+id+"\\]").parent().parent().attr("id"));

Див. Спеціальні символи в селекторах , зокрема другий абзац:

Для того, щоб використовувати будь-якого з мета-символи (наприклад , як !"#$%&'()*+,./:;<=>?@[\]^``{|}~) , як буквальна частина імені, він повинен бути екранований з подвійною косою рисою: \\. Наприклад, елемент з id="foo.bar", може використовувати селектор $("#foo\\.bar"). Специфікація CSS W3C містить повний набір правил щодо дійсних селекторів CSS . Також корисним є запис у блозі Матіаса Байнса про послідовності екранування символів CSS для ідентифікаторів .


jQuery має вбудовану функцію допомоги: api.jquery.com/jQuery.escapeSelector ... наприклад: $ ("#" + $. escapeSelector (id)), де id може мати спеціальні символи
dlo

12

Ви також можете зробити

$('[id="something['+id+']"]')

1
На мою скромну думку, це найкраща відповідь, особливо коли ідентифікатор повністю динамічний.
stackingjasoncooper

9

Ідентифікатор не може містити квадратних дужок. Це заборонено специфікацією .

Деякі веб-переглядачі можуть виправити помилки та впоратися, але вам слід виправити дані, а не намагатися мати справу з поганими даними.


Дякуємо за посилання на специфікацію. Я розумію, що вони не є дійсними ідентифікаторами, але Rails додає їх для зручності в контролер.
Mike Trpcic

1
Не тільки рейки - багато веб-додатків використовують цей фокус, оскільки він дозволяє обробнику форм перебирати масив, а не ворожити про кількість поданих необов’язкових рядків.
Bryan Agee

@BryanAgee - ids не є names, і більшість бібліотек обробників форм використовують підрахунок для ітерації, хоча кілька елементів керування з однаковим іменем, а не спеціальні правила іменування або ворожіння.
Квентін

2
@BryanAgee - Ні, ні. Значення nameатрибута не є NAMEмаркером.
Квентін

10
Починаючи з HTML5, це вже неправда. w3.org/TR/html5/dom.html#the-id-attribute .
Jiloc

9

Квадратні дужки мають особливе значення для селекторів jQuery , зокрема для фільтрів атрибутів.

Просто втечіть від них, і він знайде ваш елемент чудово

$( "#something\\[" + id + "\\]" )


4

Ви можете уникнути їх за допомогою, \\або ви можете зробити щось подібне ...

$(document.getElementById("something[" + id + "]"))

3

"Будь-який з метасимволів

!"#$%&'()*+,./:;<=>?@[\]^`{|}~

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

Наприклад, елемент з id = "foo.bar" може використовувати селектор

$("#foo\\.bar")

"[джерело: jquery doc ] та елемент з id =" foo [bar] "(хоча він не діє для W3C, але розпізнаний JQuery), може використовувати селектор

$("#foo\\[bar\\]")

(Просто відповідь, як і багато інших, але всі разом :))

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