Elementos de destino por prefijo de clase

5 minutos de lectura

avatar de usuario
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"?

  • 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

avatar de usuario
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');

Demostración de jsFiddle

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');

Demostración de jsFiddle

  • @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

avatar de usuario
Tim

Puedes hacerlo así:

$('div[class^="tab"]');

Ver http://api.jquery.com/attribute-starts-with-selector/

  • 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


avatar de usuario
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.

Elementos de destino por prefijo className

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/

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

  • 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

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad