Estoy tratando de apuntar a un padre específico de un elemento y luego agregarle una clase con jQuery. Ejemplo:
$('.disable-link').click(function(e) { $(this).hide(); $(this).parents('.item').find('.title').addClass('disabled'); e.preventDefault(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item"> <div class="title">Thing 1</div> </div> <div> <a class="disable-link" href="#">Click to Disable Thing 1</a> </div> <div class="item"> <div class="title">Thing 2</div> </div> <div> <a class="disable-link" href="#">Click to Disable Thing 2</a> </div> <div class="item"> <div class="title">Thing 3</div> </div> <div> <a class="disable-link" href="#">Click to Disable Thing 3</a> </div> Pensé que al usar .parents('.item') subiría toda la cadena hasta esa clase de item específica con this y apuntaría a esa específica, pero por alguna razón no lo es.
Intenté usar parent().parent().find('.title') pero eso termina agregando la clase disabled a todos los títulos y no solo a uno. Tengo la sensación de que es algo simple, pero no puedo entender la herencia específica.
Los elementos con la clase .item no son padres de los elementos .disable-link , por lo que primero debe apuntar al div principal y luego obtener el .item anterior usando el método .prev() como:
$('.disable-link').click(function(e) { $(this).hide(); $(this).parents('div').prev('.item').find('.title').addClass('disabled'); e.preventDefault(); });Espero que esto ayude.
$('.disable-link').click(function(e) { e.preventDefault(); $(this).hide(); $(this).parents('div').prev('.item').find('.title').addClass('disabled'); }); .disabled{ background-color: grey; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item"> <div class="title">Thing 1</div> </div> <div> <a class="disable-link" href="#">Click to Disable Thing 1</a> </div> <div class="item"> <div class="title">Thing 2</div> </div> <div> <a class="disable-link" href="#">Click to Disable Thing 2</a> </div> <div class="item"> <div class="title">Thing 3</div> </div> <div> <a class="disable-link" href="#">Click to Disable Thing 3</a> </div>