I am doing some webscraping, and trying to get both the image, and text which is located in a different class, and then display them together. Here is an example of the HTML:
<div class="thumbnail">
<div class="image>
<img src="https://www.image.com/01.jpg">
</div>
<div class="text">
Apple
</div>
</div>
<div class="thumbnail">
<div class="image>
<img src="https://www.image.com/02.jpg">
</div>
<div class="text">
Banana
</div>
</div>
So in my loop, I want to get both the image and the text.
const group: { [key: string]: string } = {};
this.$('.thumbnail .image img[src]')
.get()
.forEach(img => {
const $img = this.$(img);
// Null Check
const imgText = $img
.siblings('.text')
.text()
.trim();
group[imgText] = location.origin + imgText;
});
Type = { 'Fruit': group };
When I console log, I seem to be getting the image but not the text. I have tried siblings, next, closest etc. but none seem to work. I am also not sure what else I could put instead of location.origin.
With jquery you can select all the images and with each image you can get the src and the closest .thumbnail from which you can get the text.
$(".thumbnail img").each(function(id, img) {
var src = $(img).attr('src');
var text = $(img).closest(".thumbnail").find('.text').text().trim();
})