jQuery coincide solo con una parte de la identificación de div

2 minutos de lectura

Me encontré con una situación inusual ayer por la noche.

Necesito hacer coincidir solo una parte de la identificación. Déjame aclararte todo con un ejemplo.

Tengo pocos divs como

<div id="sales_info_1">... ...... ...... ...... ...</div>
<div id="sales_info_2">... ...... ...... ...... ...</div>
<div id="sales_info_3">... ...... ...... ...... ...</div>

y jQuery va como

jQuery("div#dont_know_what_to_write_here").bind("click", function(){
    ... ...... ...... ...... ...
});

necesito emparejar solo info_ventasignorando _1, _2 o _cualquier cosa, ¿alguien puede sugerirme cómo lograr esto?

Gracias

  • ¿Desea vincular el evento de clic en todos los div que tienen id sales_info_?

    – Shakti Singh

    20 de enero de 2011 a las 5:52

  • @all: gracias a todos por sus sugerencias/soluciones

    – IM-JM

    20 de enero de 2011 a las 6:34

Podrías usar el Selector “Empieza por”:

$('div[id^="sales_info_"]')

Sin embargo, prefiero recomendarle que use un nombre de clase único para sus elementos que pueda seleccionar.

  • ¿Por qué recomiendas eso?

    –Ian Warburton

    16 de enero de 2014 a las 12:16

  • Porque simplifica todo y es más semántico. Las clases especifican explícitamente que el elemento es un tipo de cosasmientras que los identificadores con nombres similares solo implican esto en el mejor de los casos.

    – deceze

    16 de enero de 2014 a las 12:52

  • De manera similar, ¿hay alguna manera de ignorar una identificación particular durante una selección parcial?

    – Piedra rodante

    5 de septiembre de 2016 a las 8:51

  • Sé que es muy tarde, pero para excluir una identificación en particular, podría hacer algo como $(‘div[id^=”sales_info_”]:no( #id-específico )’)

    – Recién NacidoCodeMonkey

    11/09/2017 a las 21:40

Alternativamente, agregue class="sales_info" a su marcado HTML.

Entonces, haz esto:

$(".sales_info").bind("click", function() {
   ...
}

Quiere que el atributo comienza con selector:

$('div[id^="sales_info"]').bind( ... );

Prueba con esto

$("div[id^='sales_info_']").bind( ... );

Puedes usar el selector css

prueba este código

html

<div id="sales_info_1"></div>
<div id="user_info_1"></div>
<div id="sales_info_2"></div>
<div id="user_info_2"></div>
<div id="sales_info_3"></div>
<div id="user_info_3"></div>

CSS

.red{
    display:block; 
    float:left; 
    width:50px; 
    height:20px; 
    background-color:#FF0000;}
.blue{
    display:block; 
    float:left; 
    width:50px; 
    height:20px; 
    background-color:#0000FF;}

jquery

$('div[id^="sales"]').addClass('red');
$('div[id^="user"]').addClass('blue');

selector css ^= seleccionará div con ID que comience con el valor especificado y agregará el estilo css.

avatar de usuario
Rami Alloush

en realidad necesitaba el end-with efecto y lo encontre aquí. Se usa fácilmente de la siguiente manera:

<script>
$( "input[name$='letter']" ).val( "a letter" );
</script>

Solo reemplazas el ^ con $ en el seleccionador.

¿Ha sido útil esta solución?