使用jquery獲取所有影像并保存在單獨的變數中

我正在研究網路爬蟲（使用 axios、cheerio 從網站獲取 html），因此根據要求我必須從所有 A、B 部分獲取影像，但問題是由于這些影像是靜態的。有時 A 部分包含 2 個影像和有時 B 部分包含 3 張影像。所以要求將 A 部分影像保存在不同的變數中，將 B 部分影像保存在不同的變數中。我被困在這里如何做到這一點......不知道如何區分這一點。

<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代碼：

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

uj5u.com熱心網友回復：

要查找第一組中的影像： $('div.DetailSection_content').eq(0).find('img.DetailSectionImage')

要查找第二組中的影像： $('div.DetailSection_content').eq(1).find('img.DetailSectionImage')

例子：

// 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" ]

參考：在 div 中查找第一次出現的類

uj5u.com熱心網友回復：

您可以通過首先查找標題然后使用同級選擇器來查找影像來使其動態化

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>

這將創建一個嵌套陣列，其中每組影像按部分分組，例如在索引處的部分A，在索引處0的部分B1等

_{1?? 繞過jQuery 的 .map() 自動展平陣列的 hack}

標籤：javascript jQuery

上一篇：如何在頁面加載后一秒鐘后使圖片向上移動到螢屏中心

下一篇：如何使用jquery檢查動態創建的復選框