Estoy trabajando en el rastreo web (usando axios, cheerio para obtener html del sitio web), por lo que, según el requisito, tengo que buscar imágenes de todas las secciones A, B, pero el problema se debe a que estas imágenes son estáticas. A veces, la sección A contiene 2 imágenes y a veces, la sección B contiene 3 imágenes... por lo que el requisito es mantener las imágenes de la sección A en una variable diferente y las imágenes de la sección B en una variable diferente. Me quedé atascado aquí cómo hacer esto ... no tengo idea de cómo distinguir esto.
<div class="container headingWrapper"> <h3 class="DetailSection_heading ">Section A:</h3> </div> <div class="DetailSection_content"> <div class="container"> <div class="css-0"> <div class="row justify-content-center"> <div class="col-lg-6"> <img src="https://img_url_1" alt="" class="DetailSectionImage" data-index="0"> <img src="https://img_url_2" alt="" class="DetailSectionImage" data-index="0"> </div> </div> </div> </div> </div> <div class="container headingWrapper"> <h3 class="DetailSection_heading ">Section B:</h3> </div> <div class="DetailSection_content"> <div class="container"> <div class="css-0"> <div class="row justify-content-center"> <div class="col-lg-6"> <img src="https://img_url_3" alt="" class="DetailSectionImage" data-index="0"> <img src="https://img_url_4" alt="" class="DetailSectionImage" data-index="0"> </div> </div> </div> </div> </div>código jquery:
const Fetched_imgs = $('div.DetailSection_content img').map(function() { return $(this).attr("src") }).get();Puede hacer esto dinámico buscando los encabezados primero y luego usando los selectores de hermanos para encontrar las imágenes.
const images = $(".DetailSection_heading").map((_, h) => [ // 1️⃣ $(h).closest(".headingWrapper") // move up to the wrapper .next(".DetailSection_content") // get the next sibling .find("img") // find the images .map((_, { src }) => src) // extract the src property .get() // get the result array ]).get() console.log(images) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script> <div class="container headingWrapper"> <h3 class="DetailSection_heading ">Section A:</h3></div><div class="DetailSection_content"> <div class="container"> <div class="css-0"> <div class="row justify-content-center"> <div class="col-lg-6"> <img src="https://img_url_1" alt="" class="DetailSectionImage" data-index="0"> <img src="https://img_url_2" alt="" class="DetailSectionImage" data-index="0"> </div></div></div></div></div><div class="container headingWrapper"> <h3 class="DetailSection_heading ">Section B:</h3></div><div class="DetailSection_content"> <div class="container"> <div class="css-0"> <div class="row justify-content-center"> <div class="col-lg-6"> <img src="https://img_url_3" alt="" class="DetailSectionImage" data-index="0"> <img src="https://img_url_4" alt="" class="DetailSectionImage" data-index="0"> </div></div></div></div></div> Esto creará una matriz anidada con cada conjunto de imágenes agrupadas por sección , por ejemplo, la sección A en el índice 0 , la sección B en el 1 , etc.
1️⃣ Un truco para sortear el .map() de jQuery que aplana automáticamente las matrices
Para encontrar las imágenes en el primer grupo: $('div.DetailSection_content').eq(0).find('img.DetailSectionImage')
Para encontrar las imágenes en el segundo grupo: $('div.DetailSection_content').eq(1).find('img.DetailSectionImage')
Ejemplo:
// First group: const Fetched_imgs_1 = $('div.DetailSection_content').eq(0).find('img.DetailSectionImage').map(function() { return $(this).attr("src") }).get(); // Second group: const Fetched_imgs_2 = $('div.DetailSection_content').eq(1).find('img.DetailSectionImage').map(function() { return $(this).attr("src") }).get(); console.log(Fetched_imgs_1); // Array [ "https://img_url_1", "https://img_url_2" ] console.log(Fetched_imgs_2); // Array [ "https://img_url_3", "https://img_url_4" ]Referencia: encuentra la primera aparición de la clase en div