Estoy haciendo un webscraping, y tratando de obtener tanto la imagen como el texto que se encuentra en una clase diferente, y luego mostrarlos juntos. Aquí hay un ejemplo del 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>Entonces, en mi ciclo, quiero obtener tanto la imagen como el texto.
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 };Cuando registro en la consola, parece que obtengo la imagen pero no el texto. He intentado hermanos, siguiente, más cercano, etc. pero ninguno parece funcionar. Tampoco estoy seguro de qué más podría poner en lugar de location.origin.
Con jquery puede seleccionar todas las imágenes y con cada imagen puede obtener el src y el .thumbnail más cercano desde el que puede obtener el texto.
$(".thumbnail img").each(function(id, img) { var src = $(img).attr('src'); var text = $(img).closest(".thumbnail").find('.text').text().trim(); })