Comodines en los selectores jQuery

669

Estoy tratando de usar un comodín para obtener la identificación de todos los elementos cuya identificación comienza con "jander". Lo intenté $('#jander*'), $('#jander%')pero no funciona ...

Sé que puedo usar clases de los elementos para resolverlo, pero ¿también es posible usar comodines?

<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
fuente
2
Esta es una pregunta sobre jQuery (o más exactamente el motor Sizzle).
Peter Örneholm
1
Solo una nota: sería mucho más rápido hacerlo con clases, ya que jQuery o Sizzle pueden hacer uso de las funciones del navegador (aunque no debería hacer mucha diferencia para los navegadores modernos).
Felix Kling
44
posible duplicado de expresiones regulares del selector JQuery
Robert MacLean
77
Además, una cosa importante a tener en cuenta es que $("[id*=jander]")seleccionaría todos los elementos con una ID que contenga la secuencia jander.
Gabriel Ryan Nahmias

Respuestas:

1281

Para obtener todos los elementos que comienzan con "jander", debe usar:

$("[id^=jander]")

Para obtener los que terminan con "jander"

$("[id$=jander]")

Ver también la documentación de JQuery

nico
fuente
22
Los documentos dan este ejemplo:$('input[name^="news"]').val('news here!')
Brenden
55
El código funciona según lo previsto. No es necesario hacer una cita doble, solo aumenta las posibilidades de perder una cita de cierre y la hace menos legible.
nico
44
@nico Curiosamente, los documentos dicen que funciona con atributos y ides técnicamente una propiedad , pero supongo que con las versiones más recientes de jquery (es decir, 1.9) y cómo se manejan los últimos cambios en los atributos y propiedades, la línea está ligeramente borrosa con respecto a los dos, por lo que puede usar los selectores de atributos para (al menos algunas) propiedades.
johntrepreneur
¿Qué pasa si quiero seleccionar el par de los seleccionados? por ejemplo: actualmente tengo .col-lg-4:even div:nth-child(1)si quisiera hacer lo mismo ... ¿qué escribiría? "[class^=.col-lg-]:even"? (No parece que funcione)
Luis Robles
Un poco de comportamiento que me sorprendió ---- si uso esto con "class $ = ..." busca en la lista de clases de un elemento, no en los nombres de clases individuales. Por lo tanto, solo golpea si la clase que se busca es la última clase en ese elemento. No he probado más que Chrome. Y no estoy seguro si la falla está en jQuery o en mis expectativas de jQuery.
Roger Krueger
115

Como el título sugiere comodín, también puedes usar esto:

$(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>
Expandir fragmento

Esto seleccionará la cadena dada en cualquier parte del archivo id.

Martijn Smidt
fuente
39

Prueba el jQuery comienza con

selector, '^ =', p. ej.

[id^="jander"]

Sin embargo, tengo que preguntar, ¿por qué no quieres hacer esto usando clases?

GoatInTheMachine
fuente
2
Para agregar contexto, estoy buscando la misma solución porque estoy usando Django, cuya clase ModelForm dicta identificadores basados ​​en modelos, y no parece permitir la agrupación de esta manera; es decir, el HTML está fuera de mi control.
Christian Mann
Esto es útil cuando se trabaja con ASP.Net WebForms, particularmente las listas de radio y casillas de verificación.
DavidScherer
35

para clases puedes usar: 

div[class^="jander"]
l3thal
fuente
No pude hacer que esto funcione, recibí un mensaje sobre una sintaxis no válida.
stian
14

Para obtener la identificación del partido comodín:

$('[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>
Expandir fragmento

PJ Brunet
fuente
2
En lugar de "event.target.id", esto también podría funcionar: $ (this) .attr ("id")
PJ Brunet
10

Cuando tiene una cadena de identificación más compleja, las comillas dobles son obligatorias.

Por ejemplo, si tiene una identificación como esta: id="2.2"la forma correcta de acceder es:$('input[id="2.2"]')

En la medida de lo posible, utilice las comillas dobles, por razones de seguridad.

eduard
fuente