JQuery - Aplicar css a texto seleccionando elementos por clase

Pos: 13

Val: 24

Aplicar css a texto seleccionando elementos por clase

Publicado por Javier (12 intervenciones) el 31/03/2018 15:38:03

Buenas, mi consulta, sería si es posible con Jquery realizar lo siguiente.
Tenemos una tabla cuyo contenido son números, dentro de esa tabla una serie de <td> con una clase de css específica (por ejemplo .tdespeciales), lo que necesito es que al poner el ratón encima de uno de esos <td class="tdespeciales"> cambie el color de la fuente o el fondo de ese número, y todos los números iguales localizados en esos >td> concretos, algo así:
ArfGO5x

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 4

Val: 162

Aplicar css a texto seleccionando elementos por clase

Publicado por santi (55 intervenciones) el 31/03/2018 16:25:54

Hola,

no se si lo he entendido muy bien pero ¿y si lo haces con css?:

td.tdespeciales:hover {

    color: red;

Con jQuery:

$('td.tdespeciales').hover(function(){

    $(this).css('color', 'red');

});

Pero mejor con css...

Prueba a ver ;)

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 13

Val: 24

Aplicar css a texto seleccionando elementos por clase

Publicado por Javier (12 intervenciones) el 31/03/2018 16:54:46

Gracias por responder tan rápido Santi!
Con css podría hacerlo pero solo con un elemento, si te fijas en la imagen se cambia el css de todos los td que contienen números iguales, en el ejemplo el 3.
Lo que necesito es resaltar todos los números iguales que estén contenidos dentro de un td con una clase específica.

Saludos.

Valora esta respuesta

Comentar

Pos: 4

Val: 162

Aplicar css a texto seleccionando elementos por clase

Publicado por santi (55 intervenciones) el 31/03/2018 19:37:08

Ahh ok,

puedes hacerlo como dice @kip o con jQuery:

$('td').hover(function(){

    if($(this).hasClass('tdespeciales'))//si el td tiene la clase tdespeciales

        $(this).css('color', 'red');

});

Valora esta respuesta

Comentar

Pos: 13

Val: 24

Aplicar css a texto seleccionando elementos por clase

Publicado por Javi (12 intervenciones) el 31/03/2018 20:23:22

He probado el código, y cambia el color de la fuente a rojo solamente en el td sobre el que pasas el cursor, y una vez lo retiras sigue quedándose rojo, casualmente algo parecido también me resultaría útil para un propósito diferente.
Reemplazando el .hover por .click, puedo cambiar el color de la fuente a rojo seleccionando manualmente, pero ¿qué habría que añadir para que al segundo click con el ratón volviese al estado anterior?

$('td').click(function(){

    if($(this).hasClass('tdespeciales'))//si el td tiene la clase tdespeciales

        $(this).css('color', 'red');

});

Valora esta respuesta

Comentar

Pos: 4

Val: 162

Aplicar css a texto seleccionando elementos por clase

Publicado por santi (55 intervenciones) el 31/03/2018 20:40:44

Ok,

para deshacer el hover hazlo con mouseleave:

$('.tdespeciales').mouseover(function(){//en hover

    $(this).css('color', 'red');

});

$('.tdespeciales').mouseleave(function(){//sin hover

    $(this).css('color', 'initial');//o el color principal..

});

Para el click prueba con off -> http://api.jquery.com/off/

Prueba a ver ;)

Valora esta respuesta

Comentar

Pos: 13

Val: 24

Aplicar css a texto seleccionando elementos por clase

Publicado por Javi (12 intervenciones) el 31/03/2018 20:59:28

Gracias Santi ;)

Valora esta respuesta

Comentar

Pos: 6

Val: 141

Aplicar css a texto seleccionando elementos por clase

Publicado por kip (38 intervenciones) el 31/03/2018 17:56:09

Hola, el código en javascript nativo puede ser algo asi:

const elements = [].slice.call(document.querySelectorAll('.especiales'));

elements.forEach(function(element) {

   element.addEventListener('mouseout', function(e) {

      elements.forEach(function(element) {

         element.style.color = 'black';

});

});

   element.addEventListener('mouseenter', function(e) {

      const value = this.innerText;

      elements

         .filter(function(element) {

            return element.innerText === value;

})

         .forEach(function(element) {

            element.style.color = 'red';

});

});

});

https://jsfiddle.net/jaek7g0f/27/

Usando jquery quizas asi:

const elements = $('.especiales');

elements

   .hover(function() {

         const value = this.innerText;

         elements.filter(':contains("' + value + '")')

            .css('color', 'red');

},

      function() {

         elements.css('color', 'black');

);

https://jsfiddle.net/jaek7g0f/34/

Es lo que buscas ?

Valora esta respuesta

Comentar

Pos: 13

Val: 24

Aplicar css a texto seleccionando elementos por clase

Publicado por Javi (12 intervenciones) el 31/03/2018 20:08:32

Hola kip! gracias por responder,
he probado el segundo código, el de jquery, y funciona bien, pero trata el contenido como texto y no como números enteros, me explico, si hago hover encima del 4, aplica el css a todos los 4, pero también al 14, 24, 34, 40, 41...etc y solo debería aplicarse al número 4. ¿habría alguna forma sencilla de corregir esto?

Valora esta respuesta

Comentar

Pos: 6

Val: 141

Aplicar css a texto seleccionando elementos por clase

Publicado por kip (38 intervenciones) el 31/03/2018 20:27:18

Cambiando a un callback el argumento al metodo filter, dentro de el se debe hacer el match con ===

.filter(function() {

    return this.innerText === value;

})

Valora esta respuesta

Comentar

Pos: 13

Val: 24

Aplicar css a texto seleccionando elementos por clase

Publicado por Javi (12 intervenciones) el 04/04/2018 14:49:50

El código nativo en Javascript funciona perfecto con los enteros sin realizar ningún cambio, estaba usando el de Jquery. Quería cambiar también el fondo además del color de la fuente para mejorar la visualización, he probado con esto:

const elements = [].slice.call(document.querySelectorAll('.numerosanalisistabla'));

elements.forEach(function(element) {

	element.addEventListener('mouseout', function(e) {

		elements.forEach(function(element) {

			element.style.color = 'black';

			element.style.background = 'initial';

});

});

	element.addEventListener('mouseenter', function(e) {

	const value = this.innerText;

	elements

		.filter(function(element) {

			return element.innerText === value;

})

		.forEach(function(element) {

			element.style.color = 'red';

			element.style.background = '#585858';

});

});

});

pero al quitar el cursor me elimina el css previo del resto de clases de esos mismos td. No sé si habrá alguna forma sencilla de hacerlo, en cualquier caso, muchas gracias por la ayuda recibida.

Valora esta respuesta

Comentar

ejecutar código dinamicamente

limpiar todos los divs