I have this HTML code
<div> <img src="download1.jpeg" image-id="9a8ae555af5f"></div>
<div><h1><a href ="#">test</a></h1></div>
When a user clicks on the "test" link, i would like to navigate through the tree and fetch the "image-id" attribute of the image preceding the link
I have tried this but imageID returns undefined
function trackClick(event)
{
let imageId = this.$('a').prev('img').attr('image-id');
console.log("imageId", imageId);
}
document.addEventListener('click', trackClick, true);
Any ideas on how i can make this work using js or css selectors?
thanks
This is jquery solution with prev() and parent() function:
$('#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>Using Vanilla JS, step by step:
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);