Tengo problemas para eliminar la clase activa en un determinado div. Uso dos filtros, pero de alguna manera si hago clic en uno, el otro filtro también elimina la clase activa. ¿Cómo puedo apuntar y eliminar solo la clase activa de los hijos de hermanos?
Aquí está mi HTML:
<ul class="filter"> <li class="option"> <a class="link active"> <li class="option"> <a class="link"> <li class="option"> <a class="link"> </ul> <ul class="filter2"> <li class="option"> <a class="link active"> <li class="option"> <a class="link"> <li class="option"> <a class="link"> </ul>Y aquí está mi código jQuery:
$(document).ready(function () { $('.link').bind('click', function() { // remove the active class from all elements with active class $('.active').removeClass('active') // add active class to clicked element $(this).addClass('active'); }); });Puede usar $(this).closest("ul") para encontrar el ul que contiene el elemento en el que se hizo clic, luego find para encontrar los elementos .active solo en ese ul :
$('.link').on('click', function() { const $this = $(this); $this.closest("ul").find(".active").removeClass("active"); $this.addClass('active'); }); Nota al margen: cambié bind a on . bind ha quedado en desuso durante años.
<div> <ul class="filter"> <li class="option"> <a href="javascript:;" class="link active">1</a></li> <li class="option"> <a href="javascript:;" class="link">2</a></li> <li class="option"> <a href="javascript:;" class="link">3</a></li> </ul> <ul class="filter"> <li class="option"> <a href="javascript:;" class="link active">4</a></li> <li class="option"> <a href="javascript:;" class="link">5</a></li> <li class="option"> <a href="javascript:;" class="link">6</a></li> </ul> </div> <script> $(function() { $('.filter .link').click(function(){ $(this).addClass('active').closest('.filter').find('.link').not(this).removeClass('active'); }); }); </script>mira este de una sola línea