Quiero capturar la imagen src del primer div con la clase div y la clase de imagen, sin embargo, otro div e imagen también tienen la misma clase, por lo que no puedo obtenerlo.
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>El problema con su código es que solo será el src para una imagen cuando use .attr("src")
en su caso :first no hace nada basado en su código, porque solo tiene 1 imagen dentro de cada <div class="DetailSection_content">
Puedes hacerlo así:
var imgs = $('div.DetailSection_content img').map(function() { return $(this).attr("src") }).get(); Esto devolverá una matriz de img src de $('div.DetailSection_content img')
Manifestación
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>probar
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>