Quiero devolver el valor de cada entrada a su div más cercano. Cada div tiene un nombre diferente pero la misma clase de div al lado. El problema es que no puedo encontrar la clase div más cercana con jquery. Pero el valor de escribir keyup envió con éxito.
$('.bk_name').on('keyup', function() { var q = $(this).val(); $(this).parent().closest('div.resp').html(q); console.log(q); }); //keyup <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-5"> <label>Name1</label> <input type="text" class="bk_name" name="bk_name[1]" /> <div class="resp"></div> </div> <br /> <div class="col-sm-5"> <label>Name2</label> <input type="text" class="bk_name" name="bk_name[2]" /> <div class="resp"></div> </div>Para el violín aquí: https://jsfiddle.net/s85n42eo/1/
Puede usar $(this).next('div.resp').html(q) o $(this).parent().find('div.resp').html(q)
El problema es que está usando .closest() buscará a los padres, no a los niños.
Manifestación
$('.bk_name').on('keyup', function() { var q = $(this).val(); console.log($(this).parent().find('') $(this).next('div.resp').html(q); console.log(q); }); //keyup <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-5"> <label>Name1</label> <input type="text" class="bk_name" name="bk_name[1]" /> <div class="resp"></div> </div> <br /> <div class="col-sm-5"> <label>Name2</label> <input type="text" class="bk_name" name="bk_name[2]" /> <div class="resp"></div> </div>Deberías usar
.find()cuando desea buscar un elemento anidado.
ya que haces burbujas en 1 elemento usando .parent() , llegas al elemento <div class="col-sm-5"> . desde allí, está tratando de llegar a un elemento secundario <div class="resp"> ; puede hacerlo con .find
.closest atraviesa a través de sus ancestros en el árbol DOM mientras que .find hace lo contrario
$('.bk_name').on('keyup', function() { var q = $(this).val(); $(this).parent().find('div.resp').html(q); console.log(q); }); //keyup <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-5"> <label>Name1</label> <input type="text" class="bk_name" name="bk_name[1]" /> <div class="resp"></div> </div> <br /> <div class="col-sm-5"> <label>Name2</label> <input type="text" class="bk_name" name="bk_name[2]" /> <div class="resp"></div> </div>