Подстановочные знаки в селекторах jQuery

669

Я пытаюсь использовать подстановочный знак, чтобы получить идентификатор всех элементов, чей идентификатор начинается с «jander». Я пытался $('#jander*'), $('#jander%')но это не работает ..

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

<script type="text/javascript">

  var prueba = [];

  $('#jander').each(function () {
    prueba.push($(this).attr('id'));
  });

  alert(prueba);


});

</script>

<div id="jander1"></div>
<div id="jander2"></div>

jquery jquery-selectors sizzle

— ziiweb
источник

2

Это вопрос о jQuery (или, точнее, движке Sizzle).

— Питер Эрнехольм,

1

Просто примечание: было бы намного быстрее делать это с классами, поскольку jQuery или Sizzle могут использовать функции браузера (хотя это не должно иметь большого значения для современных браузеров).

— Феликс Клинг

4

возможный дубликат регулярных выражений селектора JQuery

— Роберт Маклин

7

Также важно отметить, $("[id*=jander]")что все элементы с идентификатором, содержащим строку jander, будут выбраны.

— Габриэль Райан Намиас

1281

Чтобы получить все элементы, начинающиеся с «jander», вы должны использовать:

$("[id^=jander]")

Чтобы получить те, которые заканчиваются "jander"

$("[id$=jander]")

Смотрите также документацию JQuery

— Nico
источник

22

Документы приводят этот пример:$('input[name^="news"]').val('news here!')

— Бренден

5

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

— Нико

4

@nico Интересно, что в документах говорится, что он работает с атрибутами и idтехнически является свойством , но я предполагаю, что с более поздними выпусками jquery (например, 1.9) и тем, как обрабатываются последние изменения атрибутов и свойств, линия слегка размыта. по отношению к двум, и поэтому вы можете использовать селекторы атрибутов для (по крайней мере, некоторых) свойств.

— johntrepreneur

Что делать, если я хочу выбрать даже из выбранных. например: у меня сейчас есть, .col-lg-4:even div:nth-child(1)если бы я хотел сделать то же самое .... что бы я написал? "[class^=.col-lg-]:even"? (Я, кажется, не заставляю это работать)

— Луис Роблес

Немного поведения, которое меня удивило ---- если я использую это с "class $ = ...", он ищет список классов элемента, а не отдельные имена классов. Таким образом, он срабатывает только в том случае, если искомый класс является последним классом этого элемента. Не проверял, кроме Chrome. И не уверен, есть ли недостаток в jQuery или в моих ожиданиях от jQuery.

— Роджер Крюгер

115

Поскольку заголовок предлагает подстановочный знак, вы также можете использовать это:

$(document).ready(function(){
  console.log($('[id*=ander]'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jander1"></div>
<div id="jander2"></div>

Развернуть фрагмент

Это выберет данную строку в любом месте id.

— Мартейн Смидт
источник

39

Попробуйте JQuery начинается с

селектор, «^ =», например

[id^="jander"]

Я должен спросить, хотя, почему вы не хотите делать это с помощью классов?

— GoatInTheMachine
источник

2

Чтобы добавить контекст, я ищу то же решение, потому что я использую Django, чей класс ModelForm диктует идентификаторы на основе моделей, и, похоже, не позволяет группировать таким образом; т.е. HTML вне моего контроля.

— Кристиан Манн

Это полезно при работе с ASP.Net WebForms, особенно со списками радио и флажков.

— DavidScherer

35

для занятий вы можете использовать:

div[class^="jander"]

— l3thal
источник

Я не мог заставить это работать, получаю сообщение о неверном синтаксисе.

— Стиан

14

Чтобы получить идентификатор из совпадения с подстановочными знаками:

$('[id^=pick_]').click(
  function(event) {

    // Do something with the id # here: 
    alert('Picked: '+ event.target.id.slice(5));

  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pick_1">moo1</div>
<div id="pick_2">moo2</div>
<div id="pick_3">moo3</div>

Развернуть фрагмент

— PJ Brunet
источник

2

Вместо «event.target.id» это тоже может сработать: $ (this) .attr («id»)

— PJ Brunet

10

Если у вас есть более сложная строка идентификатора, двойные кавычки обязательны.

Например, если у вас есть такой идентификатор: id="2.2"правильный способ получить к нему доступ:$('input[id="2.2"]')

По возможности используйте двойные кавычки, из соображений безопасности.

— эдуард
источник