Tengo el siguiente HTML:
<table> <tr> <td> <span class="btn active">One</span> <span class="btn">Two</span> <span class="btn">Three</span> </td> </tr> <tr> <td> <span class="btn">One</span> <span class="btn active">Two</span> <span class="btn">Three</span> </td> </tr> </table> Intento agregar la clase active al elemento actual en el que se hizo clic:
$(document).ready(function() { $(".btn").click(function() { $(".btn").removeClass("active"); $(this).addClass("active"); }); }); funciona, pero elimina la clase active de todos los demás tramos.
¿Cómo eliminar la clase active solo de los elementos más cercanos, por ejemplo, solo dentro del td principal?
Puede asegurarse de eliminar la clase solo de los elementos secundarios del elemento principal del intervalo en el que se hizo clic.
$(document).ready(function() { $(".btn").click(function() { $(this.parentElement.childNodes).removeClass("active"); $(this).addClass("active"); }); });Para hacer lo que necesita, puede usar this palabra clave en el controlador de eventos para hacer referencia al elemento que generó el evento. A partir de ahí, puede usar los métodos transversales del DOM de jQuery, en este caso siblings() , para encontrar los elementos relacionados y cambiar sus clases.
jQuery($ => { $(".btn").click(function() { $(this).addClass('active').siblings('span').removeClass("active"); }); }); .active { color: #C00; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table> <tr> <td> <span class="btn active">One</span> <span class="btn">Two</span> <span class="btn">Three</span> </td> </tr> <tr> <td> <span class="btn">One</span> <span class="btn active">Two</span> <span class="btn">Three</span> </td> </tr> </table>encuentro solución:
$(document).ready(function() { $(".btn").click(function() { $(this).parent().find('.btn').removeClass("active"); $(this).addClass("active"); }); }); .active { background: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <span class="btn active">One</span> <span class="btn">Two</span> <span class="btn">Three</span> </td> </tr> <tr> <td> <span class="btn">One</span> <span class="btn active">Two</span> <span class="btn">Three</span> </td> </tr> </table>