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>

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


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


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>

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


39

Prueba el jQuery comienza con

selector, '^ =', p. ej.

[id^="jander"]

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


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"]

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>


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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.