Существует ли селектор подстановочных знаков для идентификаторов (id)? - PullRequest
62 голосов
/ 13 сентября 2010

Если у меня есть неизвестное количество идентификаторов, разделяющих конкретную схему именования, есть ли способ получить их все сразу, используя jQuery?

// These are the IDs I'd like to select
#instance1
#instance2
#instance3
#instance4

// What do I need to add or how do I need to modify this jQuery selector in order to select all the IDs above?
("#instanceWILDCARD").click(function(){}

Ответы [ 9 ]

168 голосов
/ 13 сентября 2010

Атрибут начинается с селектора ('^=) будет работать для ваших идентификаторов, например:

$("[id^=instance]").click(function() {
  //do stuff
});

Тем не менее, рассмотрите возможность присвоения вашим элементам общего класса, например (я взломаю себя) .instance, и используйте этот селектор:

$(".instance").click(function() {
  //do stuff
});
84 голосов
/ 19 октября 2011

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

// handle elements like <div class="someclass1"></div>
$('[class^="someclass"]').click(function() {
   // do stuff
});

// handle elements like <div class="foo someclass1"></div>
$('[class*=" someclass"]').click(function() {
   // do stuff
});
11 голосов
/ 30 мая 2012

Я удивлен, что никто не упоминал о создании вашего собственного селектора фильтров (за счет расширения функциональности селектора jQuery). Здесь я создал селекторы подстановочных знаков, которые я назвал «likeClass» и «likeId», которые принимают любую подстановочную строку и находят все совпадающие элементы (аналогично сопоставлению с регулярным выражением).

Код:

$.expr[':'].likeClass = function(match){
      return $('[class*=" '+ match +'"]');
};
$.expr[':'].likeId = function(match){
      return $('[id*=" '+ match +'"]');
};

Пример использования:

Теперь предположим, что у вас есть несколько элементов div с похожими именами, такими как .content-1, .content-2, .content-n ... и т. Д., И вы хотите выбрать их. Теперь это торт!

$ ( 'ДИВ: likeClass (контент-)'); // Возвращает все элементы с похожим Classname: content - *

или

$ ( 'ДИВ: likeClass (контент-)'); // Возвращает все элементы с одинаковым идентификатором: content - *

Ах да, еще одна вещь ... вы тоже можете зацепить это. :)

$('li:likeId(slider-content-)').hide().addClass('sliderBlock').first().fadeIn('fast');

Наслаждайтесь!

10 голосов
/ 28 мая 2014

Нет необходимости в дополнительном выражении или что-нибудь необычное, если у вас есть jQuery

jQuery('[class*="someclass"]').click(function(){
});

jQuery('[id*="someclass"]').click(function(){
});

Как отмечено: https://stackoverflow.com/a/2220874/2845401

3 голосов
/ 13 сентября 2010

Это идентификаторы, но вы можете сделать что-то похожее на:

$("[id^='instance']").click(...)

Хотя это немного дорого - полезно, если вы можете указать а) тип элемента или б) общую позицию в DOM, например:

$("#someContentDiv span[id^='instance']").click(...)

Селектор [id^='...'] в основном означает «найти элемент, идентификатор которого начинается с этой строки, аналогично id$= (идентификатор заканчивается этой строкой) и т. Д.

Полный список вы можете найти на странице Документов jQuery здесь .

3 голосов
/ 13 сентября 2010

Почему бы вам просто не назначить class = "instance" для всех из них и не выбрать их, используя $('.instance')?

2 голосов
/ 13 сентября 2010

Используйте морковь.

$("div[id^=instance]").hide();

Пример jsFiddle

0 голосов
/ 29 апреля 2014

Это единственный правильный ответ на вопрос с подстановочным знаком id.

$('[id*="Wild card in double quotes"]') 

В результате вы получите «Wild-карту в двойных кавычках. И еще больше !!!», а также «Больше БС перед Wild. Wild-карта в двойных кавычках».

Вы должны использовать кавычки, которые отличаются от ваших тегов '[]'.

0 голосов
/ 05 сентября 2013

Мы можем сделать это следующим образом:

$(document).ready(function () {
    $('[id*=btnOk]').live("click", function () {

    });
});
...