Tengo este código HTML
<div> <img src="download1.jpeg" image-id="9a8ae555af5f"></div> <div><h1><a href ="#">test</a></h1></div>Cuando un usuario hace clic en el enlace de "prueba", me gustaría navegar por el árbol y buscar el atributo "id de imagen" de la imagen que precede al enlace.
He intentado esto pero imageID devuelve indefinido
function trackClick(event) { let imageId = this.$('a').prev('img').attr('image-id'); console.log("imageId", imageId); } document.addEventListener('click', trackClick, true);¿Alguna idea sobre cómo puedo hacer que esto funcione usando los selectores js o css?
Gracias
Esta es la solución jquery con la función prev() y parent():
$('#test').on('click', function() { alert($(this).parent().parent().prev('div').find('img').attr('image-id')) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <img src="download1.jpeg" image-id="9a8ae555af5f"> </div> <div> <h1> <a href ="#" id = 'test'>test</a> </h1> </div>Usando Vanilla JS, paso a paso:
function trackClick(event) { let targetElement = event.target || event.srcElement; let closestDiv = targetElement.closest('div'); let previousDiv = closestDiv.previousElementSibling; let insideImage = previousDiv.getElementsByTagName('img'); // or // let insideImage = previousDiv.children; console.log(insideImage[0].getAttribute('src')); } document.addEventListener('click', trackClick, true);