CODEWITHSUNDEEP
javascriptjquery
faraz
faraz

Reputation: 233

Fetch all images and keep in separate variable using jquery

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();

Upvotes: 3

Views: 249

Answers (2)

Phil
Phil

Reputation: 164768

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

Upvotes: 3

kmoser
kmoser

Reputation: 9273

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

Upvotes: 3

Related Questions