charles yung
Supongamos que tengo los elementos de la siguiente manera:
<div class="home">
<div class="tab231891230"></div>
<div class="tab121232441"></div>
<div class="tab123134545"></div>
</div>
¿Cómo puedo usar jQuery para seleccionar los elementos div que tienen la clase que comienza con "tab"?
kapá
se llama el El atributo comienza con el selector. Mi ejemplo establece un color de texto rojo en los elementos:
$('[class^="tab"]').css('color', 'red');
Tenga en cuenta que si los elementos tienen más de una clase y la otra precede a la que tiene tab en el interior (class="nyedva tab231891230") el elemento no será seleccionado por este selector.
Si desea seleccionar incluso estos, puede usar este ejemplo:
$('.home div').filter(function () {
return this.className.match(/\btab/);
}).css('color', 'red');
@SyedQarib ¿Por qué no funcionaría? solo reemplaza .home div con simplemente div.
– kapa
6 de julio de 2015 a las 8:53
Perdón por eso, estaba tratando de filtrar más etiquetas que solo divs, pero ahora tengo la idea de cómo hacerlo… gracias
– Syed Qarib
6 de julio de 2015 a las 9:34
@lowtechsun ¿Qué nos quiere decir con este enlace de jsFiddle?
– kapa
20 de febrero de 2016 a las 20:32
@kapa acaba de agregar $ a su violín para que la gente pueda ver lo que hace en acción.
– lowtechsun
21 de febrero de 2016 a las 2:17
@lowtechsun Ya veo, gracias. Editaré en mi respuesta.
– kapa
22 de febrero de 2016 a las 9:10
Si tiene varias clases dentro de un elemento, use esto para seleccionar
$("[class*='tab']");
Funcionará con elementos como este.
<div class="home">
<div class="module tab231891230"></div>
<div class="module tab121232441"></div>
<div class="module tab123134545"></div>
Referencia : jquery atributo-contiene selector
Tenga en cuenta que esto también seleccionará clases como timetablelo que resulta en errores “extraños”.
– kapa
22 de febrero de 2016 a las 9:14
Tim
Puedes hacerlo así:
$('div[class^="tab"]');
Me temo que en realidad no funcionará porque hay un error tipográfico (lo copié a ciegas y recibí el mensaje de error “expresión no reconocida”). Hay demasiados signos de igual y la sintaxis correcta es: $(‘div[class^=”tab”]’);
– Alex Sanséau
31 de agosto de 2015 a las 12:34
Roko C. Bulján
Lo primero y más importante: trate siempre de utilizar un Delimitador seguro me gusta - Es decir: tab-something
los forma apropiada para seleccionar la clase por prefijo es mediante el uso de un combinación de dos Selectores de atributosla ^ Comienza con y * Incluye.
La razón es: usando solo: [class^="tab-something"] tal seleccionará solo class="tab-something foo bar" pero no class="foo tab-something bar" elementos — dándote resultados erráticos.
JavaScript:
const tabs = document.querySelectorAll('[class^="tab-"], [class*=" tab-"]');
jQuery:
const $tabs = $('[class^="tab-"], [class*=" tab-"]');
CSS:
[class^="tab-"], [class*=" tab-"] {
/* "tab-" prefixed class styles here */
}
Recordar:
lo anterior se asegurará de apuntar a ambos "tab-aaa foo bar" y "foo tab-bbb bar"
¿Por qué usar eso? ese número, puede asignarlo al atributo rel o id, así:
<div class="home">
<div class="tab" rel="231891230"></div>
<div class="tab" rel="121232441"></div>
<div class="tab" rel="123134545"></div>
</div>
entonces será accesible en:
$('div.tab').click(yourhandler);
o incluso, agregue una subclase de esa clase de “pestaña” actual:
<div class="home">
<div class="tab 231891230"></div>
<div class="tab 121232441"></div>
<div class="tab 123134545"></div>
</div>
luego, simplemente seleccione por clase de “pestaña” como en el ejemplo de jQuery anterior, y haga lo que quiera con la segunda clase (verifique si está allí, elimínela).
revisa estos:
http://api.jquery.com/class-selector/
http://api.jquery.com/hasClass/
La forma correcta de almacenar valores en su enfoque es un data- atributo.
– kapa
19 de mayo de 2011 a las 7:52
además, las clases no pueden comenzar con números
– Damon
19 de septiembre de 2013 a las 13:44
En lugar de criticar el ejemplo, tal vez intente responder la pregunta: Sí, los nombres de clase en la pregunta del OP son ejemplos deficientes, pero la pregunta sigue siendo válida.
–Derek Henderson
23 de junio de 2015 a las 14:42
La forma correcta de almacenar valores en su enfoque es un data- atributo.
– kapa
19 de mayo de 2011 a las 7:52
además, las clases no pueden comenzar con números
– Damon
19 de septiembre de 2013 a las 13:44
En lugar de criticar el ejemplo, tal vez intente responder la pregunta: Sí, los nombres de clase en la pregunta del OP son ejemplos deficientes, pero la pregunta sigue siendo válida.
–Derek Henderson
23 de junio de 2015 a las 14:42
Solo un comentario general sobre las clases frente a los identificadores: las clases deben coincidir ampliamente con una “clase” de varios elementos y los identificadores deben coincidir con elementos específicos. En general, “tab1234567” es algo específico, lo que significa que debe usar una “id” y no una clase. Pero a veces no tienes elección si el código ya está escrito 🙂
– PJ Brunet
20 de enero de 2015 a las 22:34