Estoy buscando tener la dirección-departamento del elemento más cercano:
<div> <div class="field"> <input type="text" class="address-zipcode"> </div> <div class="field"> <input type="text" class="address-department"> </div> <div class="field"> <input type="text" class="city"> </div> <div class="field"> <input type="text" class="country"> </div> </div> <div> <div class="field"> <input type="text" class="address-zipcode"> </div> <div class="field"> <input type="text" class="address-department"> </div> <div class="field"> <input type="text" class="city"> </div> <div class="field"> <input type="text" class="country"> </div> </div>Estoy haciendo ajax, cuando grabo en el código postal, autocompleta la dirección-departamento, pero ahora tengo 2 bloques de dirección y quiero que cuando "ingreso" en la dirección-código postal, él cambie solo la dirección-departamento más cercana.
Probé con this.closest('.field').closest('.field.address-department') pero no funciona. ¿Sabes cómo puedo hacer eso? Gracias !
Estoy de acuerdo en que el nombre closest es un poco confuso. puede pensar en el closest como un selector de consulta inverso. Básicamente, encontrará el siguiente elemento principal que coincida con la declaración. así que puedes bajar pero no volver a subir con eso.
Sugeriría simplemente usar querySelector para esto. Esto sería independiente de la estructura, el orden y la profundidad.
Básicamente: regrese a una base común (en este caso, una forma circundante) y busque el elemento.
Puede encontrar esta base común llamando al closest('your-base') o accediendo a través de una identificación, o lo que sea.
const button = document.getElementById('button'); const button2 = document.getElementById('button2'); button.addEventListener('click', () => { const form = document.getElementById('base'); const department = form.querySelector('.address-department'); if(!department) return; department.classList.toggle('found'); }) button2.addEventListener('click', () => { const form = document.getElementById('search-start'); const department = form.closest('form').querySelector('.address-department'); if(!department) return; department.classList.toggle('found'); }) .found { background: red; } <form id="base"> <div> <div class="field"> <input type="text" class="address-zipcode" id="search-start"> </div> <div class="field"> <input type="text" class="address-department"> </div> <div class="field"> <input type="text" class="city"> </div> <div class="field"> <input type="text" class="country"> </div> </div> <div> <div class="field"> <input type="text" class="address-zipcode"> </div> <div class="field"> <input type="text" class="address-department"> </div> <div class="field"> <input type="text" class="city"> </div> <div class="field"> <input type="text" class="country"> </div> </div> </form> <button id="button">Find Department from Base</button> <button id="button2">Find Department from Input</button>