僅使用jquery選擇器從第一個div中選擇影像-有解無憂

我想用 div 類和影像類從第一個 div 中獲取影像 src，但是另一個 div 和影像也有相同的類，所以我無法得到它。

console.log(
    $("div.DetailSection_content").find("img:first").attr("src")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
        </div>
      </div>
    </div>
  </div>
</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_2" alt="" class="DetailSectionImage" data-index="0">
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您的代碼的問題在于，當您使用時，它只會src用于一張圖片.attr("src")

在您的情況下:first，不會根據您的代碼執行任何操作，因為每個內部只有 1 個影像<div >

你可以這樣做：

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

這將回傳一個 img src 的陣列$('div.DetailSection_content img')

演示

顯示代碼片段

var imgs = $('div.DetailSection_content img').map(function() {
  return $(this).attr("src")
}).get();
console.log(imgs)

console.log(
    $("div.DetailSection_content img").attr("src")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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_url1" alt="" class="DetailSectionImage" data-index="0">
        </div>
      </div>
    </div>
  </div>
</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_url2" alt="" class="DetailSectionImage" data-index="0">
        </div>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

嘗試

const src = $('div.DetailSection_content img')[0].src

$(() => {

const src = $('.DetailSection_content img')[0].src

console.log(src)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
        </div>
      </div>
    </div>
  </div>
</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_2" alt="" class="DetailSectionImage" data-index="0">
        </div>
      </div>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/434101.html

標籤：javascript jQuery

上一篇：Javascript-在容器中插入影像文本和描述

下一篇：為什么這只是旋轉而不向右移動？