Fetch all images and keep in separate variable using jquery-CodePudding

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 >
   <h3 >Section A:</h3>
</div>

<div >
  <div >
    <div >
      <div >
        <div >
          <img src="https://img_url_1" alt=""  data-index="0">
          <img src="https://img_url_2" alt=""  data-index="0">
        </div>
      </div>
    </div>
  </div>
</div>

<div >
   <h3 >Section B:</h3>
</div>

<div >
  <div >
    <div >
      <div >
        <div >
          <img src="https://img_url_3" alt=""  data-index="0">
            <img src="https://img_url_4" alt=""  data-index="0">
        </div>
      </div>
    </div>
  </div>
</div>

jquery Code:

const Fetched_imgs = $('div.DetailSection_content img').map(function() {
  return $(this).attr("src")
}).get();

CodePudding user response：

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

CodePudding user response：

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 > <h3 >Section A:</h3></div><div > <div > <div > <div > <div > <img src="https://img_url_1" alt=""  data-index="0"> <img src="https://img_url_2" alt=""  data-index="0"> </div></div></div></div></div><div > <h3 >Section B:</h3></div><div > <div > <div > <div > <div > <img src="https://img_url_3" alt=""  data-index="0"> <img src="https://img_url_4" alt=""  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}