¿Hay un selector comodín para identificadores (id)?


Si tengo una cantidad desconocida de identificadores que comparten un esquema de nombres específico, ¿hay alguna manera de obtenerlos todos a la vez usando 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(){}
Author: Jonathan Arbely, 2010-09-13

9 answers

El atributo comienza con el selector ('^=) funcionará para sus ID, así:

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

Sin embargo, considere darle a sus elementos una clase común, por ejemplo (I crack myself up) .instance, y use ese selector:

$(".instance").click(function() {
  //do stuff
});
 160
Author: Nick Craver,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-13 02:25:35

Si realmente quieres hacer coincidir clases, no ids, la sintaxis es un poco más complicada, ya que la clase puede tener múltiples valores.

// 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
});
 81
Author: Eric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-18 21:58:53

Me sorprende que nadie haya mencionado la creación de su propio selector de filtros (mediante la ampliación de la funcionalidad de Selector de jQuery). Aquí he creado un selector de comodines que he llamado " likeClass "y" Likid " que acepta cualquier cadena de comodines y encontrará todos los elementos que coinciden (similar a la coincidencia de expresiones regulares).

Código:

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

Ejemplo De Uso:

Ahora digamos que tienes varios elementos div con nombres similares como.contenido-1, .contenido-2, .contenido-n... etc y quieres seleccionarlos. ¡Ahora es pastel!

} ('div: likeClass (content -)'); / / Devuelve todos los elementos que tienen un Nombre de clase similar: content - *

O

} ('div: likeClass (content -)'); / / Devuelve todos los elementos que tienen un ID similar: content - *

Oh sí, una cosa más... puedes encadenarlo también. :)

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

Disfrute!

 11
Author: Timothy Perez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-30 15:38:41

No hay necesidad de expr adicional o nada de lujo si tiene jQuery

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

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

Como se señaló: https://stackoverflow.com/a/2220874/2845401

 9
Author: Shinrai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:32:15

¿Por qué no asignas class = "instance" a todos ellos y los seleccionas usando $('.instance')?

 3
Author: casablanca,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-13 02:24:44

Esos son IDs, pero puedes hacer algo similar a:

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

Eso es un poco caro, sin embargo, ayuda si puede especificar a) el tipo de elemento o b) una posición general en el DOM, como:

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

El selector [id^='...'] básicamente significa "encuentra un elemento cuyo ID comienza con esta cadena, similar a id$= (ID termina con esta cadena), etc.

Puede encontrar una lista completa en la página de jQuery Docs aquí.

 3
Author: mway,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-13 02:25:11

Usa la zanahoria.

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

Ejemplo JsFiddle

 2
Author: jhanifen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-13 05:04:59

Podemos hacerlo de esta manera:

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

    });
});
 -2
Author: Thomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-05 16:25:07

Esta es la única respuesta correcta a la pregunta comodín id.

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

Esto obtendrá "Comodín" entre comillas dobles. ¡Y hay más!!!", y también " More BS in front of Wild. Wild card in double quotes"(en inglés).

Debe usar comillas que sean diferentes a sus etiquetas' []'.

 -2
Author: Kurt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-29 18:29:56