I am working on web crawling (using axios, cheerio to get html from website)so as per requirement I have to fetch images from all section A,B but issue is due to this images are static.. sometimes section A contain 2 images and sometimes section B contain 3 images.. so requirement is keep section A images in different variable and section B images in different variable. I got stuck here how to do this... no idea how to distinguish this.
<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>
jquery Code:
const Fetched_imgs = $('div.DetailSection_content img').map(function() {
return $(this).attr("src")
}).get();
You can make this dynamic by finding the headings first then using sibling selectors to find the images
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>This will create a nested array with each set of images grouped by the section, eg section A at index 0, section B at 1, etc
1️⃣ A hack to get around jQuery's .map() automatically flattening arrays
To find the images in the first group:
$('div.DetailSection_content').eq(0).find('img.DetailSectionImage')
To find the images in the second group:
$('div.DetailSection_content').eq(1).find('img.DetailSectionImage')
Example:
// 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" ]
Reference: find first occurrence of class in div