Идентификация элементов по постоянному классу и динамическому идентификатору

Question

Идентификация элементов по постоянному классу и динамическому идентификатору

0

На моем веб-сайте у меня есть несколько элементов, устанавливающих таким образом: 1. class= 'up' id = '1' 2. class= 'up' id = '2' 3. class= 'up' id = '3' 4. class= 'up' id = '4' и т.д. (количество неизвестных элементов)

Моя проблема заключается в попытке идентифицировать их в javascript. Я попытался использовать следующий код (JQuery) для выбора определенного элемента:

$('.up#'+ id)....

Однако это, похоже, терпит неудачу. id вы видите, содержит переменную, переданную в эту функцию. Он передается из события щелчка и настраивается таким образом:

$('.up').click(function(){
    some_function(this.id);
});

some_function принимает этот id, и это единственный аргумент, переданный ему.

Я не знаю, почему это терпит неудачу, спасибо за любую помощь!

arielschon12 18 сен. 2013, в 11:42

Источник

Теги:

javascript

jquery

html

html5

2 ответа

0

Вы должны поставить символ перед id, как это.

<element id="e1" class="up">

$('#e' + id) //reference the element by id

Oskar Hane 18 сен. 2013, в 06:26

Ещё вопросы

T.J. Crowder · Accepted Answer · 2013-09-18T06-53-00.000Z

Значения id CSS не могут начинаться с цифры, поэтому селектор .up#1 недействителен (как и селектор #1). Если вы измените свои значения id чтобы начать с буквы (обычно я использую x если у меня есть что-то более полезное, которое я могу использовать, например, x1, x2 и т.д.), Эти селекторы будут работать (при условии, конечно, что элементы существуют как когда вы используете селектор).

(Эта цифра - это ограничение CSS, HTML и DOM фактически не заботятся о ваших значениях id, если они уникальны.)

Замечание: очень редко вы хотите квалифицировать селектор id (с именем тега, классом и т.д.). id уникальны на странице, и поэтому не нуждаются в дополнительной квалификации. Для этого используются прецеденты, в основном, только для таргетинга на элемент, если он также имеет данный тег или класс и игнорирует его, если это не так, но в 99,9% случаев вам просто нужно #id.

Я также наткнулся на это на проекте. Предложением было бы поставить какой-то префикс перед цифрами, например .up#n1 .
Не в HTML5: «Любая строка со следующими ограничениями: должна быть длиной не менее одного символа и не должна содержать пробелов». W3.org/TR/html-markup/global-attributes.html#common.attrs.id
@pawel: Верно. CSS и HTML5 это разные вещи. Проблема здесь в селекторе CSS.
Поскольку мы находимся в контексте запросов DOM, это не должно быть проблемой.
@pawel: Нет. Опять же: это селектор CSS , и поэтому он должен следовать правилам селектора CSS. Вы можете проверить это сами тривиально: в веб-консоли Chrome или Firefox введите document.querySelector("#1") и посмотрите, что он делает.
Спасибо, это было замечательно! Работал :)
@TJCrowder Это будет означать, что jQuery делегирует $('.foo#bar') для querySelector , но $('#bar') для getElementById , который я не могу воспроизвести. Но это технические детали, конечно, лучше быть в безопасности и добавить это письмо в ID :)
@pawel: что jQuery делает со селекторами, сильно зависит от используемого вами селектора, от браузера и от того, какую версию jQuery вы используете. Он не всегда следует правилам, но он использует getElementById для простых селекторов id (а getElementById не использует селекторы CSS, поэтому его не волнует id ). Согласно документам , jQuery также будет использовать getElementById даже если вы комбинируете селектор id с чем-то еще, что удивляет меня, а также заставляет задуматься, какую версию jQuery использует OP, поскольку, по его словам, это решило проблему. :-)
Да, я знаком с механизмом выбора Sizzle, поэтому я удивлен, особенно тем, что отдельные тестовые сценарии отлично работают для различных селекторов с однозначным атрибутом ID.
@pawel: Я тоже. Суть в том, что я не использую недействительные селекторы, даже когда они (иногда) работают. :-)