Estoy usando el selector Jquery. Tengo dos addDDetails. Cuando hacemos clic en addDDetails, el sistema resaltará rosa en el segundo addDDetails (lo cual comento [Quiero seleccionar esto!!!])
Noté que al hacer clic en AddDDetails primero, el sistema resalta el rosa incorrectamente al principio AddDetails. ¿Cómo puedo hacer clic en el primer addDDetails, el sistema resalta el rosa en el segundo addDDetails?
Gracias.
$(".addDDetails").click(function () { $(this).closest(".Details > div").find(".addDDetails").css("background", "pink") }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="row Details" style="border-style:solid;"> <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield"> <div class="row"> <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield"> <span class="icon icon--plus addDDetails">+</span> </div> <div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield"> </div> </div> </div> <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield"> <div class="row"> <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield"> <span class="icon icon--plus addDDetails">+ [ I want select This!!! ]</span> </div> <div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield"> </div> </div> </div> </div>Puede usar eq() para encontrar el elemento de índice especificado y vincular el controlador de eventos correspondiente.
O puede usar .index() en el selector de clase para juzgar el índice del elemento actual y hacer la lógica correspondiente.
Si los elementos son hermanos, podrías hacer esto:
var index = $(this).index();Si no, puedes pasar un selector del conjunto en el que buscar el elemento.
var index = $(this).index('your selector');p.ej
const _selector = '.addDDetails'; const _cssName = 'background-color'; $(_selector).click(function() { const index = $(this).index(_selector); $(_selector).css(_cssName, 'red'); if (index == 0) { $(this).eq(index).css(_cssName, ''); } else { $(_selector).css(_cssName, ''); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="row Details" style="border-style:solid;"> <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield"> <div class="row"> <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield"> <span class="icon icon--plus addDDetails">+</span> </div> <div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield"> </div> </div> </div> <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12 textfield"> <div class="row"> <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 textfield"> <span class="icon icon--plus addDDetails">+ [ I want select This!!! ]</span> </div> <div class="col-lg-11 col-md-11 col-xs-11 col-sm-11 textfield"> </div> </div> </div> </div>Aquí el uso de la respuesta
.niños('div').eq(1)
$(".addDDetails").click(function () { $(this).closest(".Details").children('div').eq(1).find('.addDDetails').length == 1).css("background", "pink"); });Gracias.