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

592

Я пытаюсь использовать подстановочный знак, чтобы получить идентификатор всех элементов, чей идентификатор начинается с "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>
  • 2
    Это вопрос о jQuery (точнее, движке Sizzle).
  • 1
    Просто примечание: было бы намного быстрее делать это с классами, поскольку jQuery или Sizzle могут использовать функции браузера (хотя это не должно иметь большого значения для современных браузеров).
Показать ещё 2 комментария
Теги:
jquery-selectors
sizzle

6 ответов

1160
Лучший ответ

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

$("[id^=jander]")

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

$("[id$=jander]")

См. также Документация JQuery

Поделиться
  • 20
    Документы приводят этот пример: $('input[name^="news"]').val('news here!')
  • 5
    Код работает как задумано. Не нужно использовать двойные кавычки, это только увеличивает вероятность пропустить заключительную кавычку и делает ее менее читаемой.
Показать ещё 6 комментариев
110

Так как название предлагает шаблон, вы также можете использовать это:

$(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.

Поделиться
33

Попробуйте запустить jQuery с помощью

'^ =', например

[id^="jander"]

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

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

для классов, которые вы можете использовать:

div[class^="jander"]
Поделиться
  • 0
    Я не мог заставить это работать, получаю сообщение о неверном синтаксисе.
  • 0
    отредактированный ответ, включающий правильный синтаксис
Показать ещё 1 комментарий
12

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

$('[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>
Поделиться
  • 2
    Вместо «event.target.id» это тоже может сработать: $ (this) .attr («id»)
  • 1
    поставить скрипку для этого jsfiddle.net/9mTjF
9

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню