Select image from first div only using jquery selector

February 28, 2022

I want to grab image src from first div with div class and image class, however another div and image also has same class so I am unable to get it.

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>

>Solution :

The problem with your code is that it will only the src for one image when you use .attr("src")

in your case :first does not do anything based on your code, because you only have 1 image inside each <div class="DetailSection_content">

You can do it like this:

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

This will return an array of the img src from $('div.DetailSection_content img')

Demo

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>