Jquery get image src array

Question

I'm making a discord bot with discord.js. jQuery get the image src

looked for the most relevant article, but it's different from what I'm trying to do.

I'd like to receive several srcs of img in the span tag by array.

<div class="jewel__wrap">
   <span id="gem00" class="jewel_btn" data-grade="3" data-item="E595062cGem_000">
     <span class="jewel_img">
       <img src="https://xxx/60.png" alt=""> // this src
     </span>
     <span class="jewel_level">Lv.5</span>
   </span>
   <span id="gem01" class="jewel_btn" data-grade="3" data-item="E595062cGem_001">
     <span class="jewel_img">
       <img src="https://xxx/50.png" alt=""></span> // this src
     <span class="jewel_level">Lv.5</span>
   </span>
</div>

const jewel = $(".jewel_level").text();
const jewel2 = $(".jewel_img").find('img').attr("src");

console.log("jewel : ", jewel, "jewel2 : ", jewel2);

jewel receives both lv.5 and ex) lv.5lv.5. jewel2 only receives one src.

How should I bring it?

console

jewel : Lv.5Lv.5 jewel2 : https://xxx/60.png

Phil · Accepted Answer · 2022-02-14T04:39:42.897

The problem with jQuery's .attr() is...

Get the value of an attribute for the first element in the set of matched elements

Instead, you can use jQuery's .map() to transform a collection of elements into an array

const sources = $(".jewel_img > img")
  .map((_, { src }) => src) // extract property
  .get() // get the array out of the jQuery object
  
console.log("sources", sources)

<!-- minified HTML -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="jewel__wrap"> <span id="gem00" class="jewel_btn" data-grade="3" data-item="E595062cGem_000"> <span class="jewel_img"> <img src="https://xxx/60.png" alt=""> </span> <span class="jewel_level">Lv.5</span> </span> <span id="gem01" class="jewel_btn" data-grade="3" data-item="E595062cGem_001"> <span class="jewel_img"> <img src="https://xxx/50.png" alt=""></span> <span class="jewel_level">Lv.5</span> </span></div>

You may even want to treat the text in a similar way and collect all the data into objects

const data = $(".jewel_btn")
  .map((_, btn) => {
    const $btn = $(btn)
    return {
      image: $btn.find(".jewel_img img").attr("src"),
      level: $btn.find(".jewel_level").text()
    }
  })
  .get()
  
console.log("data", data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="jewel__wrap"> <span id="gem00" class="jewel_btn" data-grade="3" data-item="E595062cGem_000"> <span class="jewel_img"> <img src="https://xxx/60.png" alt=""> </span> <span class="jewel_level">Lv.5</span> </span> <span id="gem01" class="jewel_btn" data-grade="3" data-item="E595062cGem_001"> <span class="jewel_img"> <img src="https://xxx/50.png" alt=""></span> <span class="jewel_level">Lv.5</span> </span></div>

Thank you so much. I solved what I couldn't do in the past few days. It works well if I execute the **first code** you uploaded on the **comment snippet**, but when I execute it on my code, sources[] appears. Can I know which point is the problem? The second code you uploaded is good at outputting image and level. — appdev, Feb 14 '22 at 04:47
@appdev if you replaced your current line of code `const jewel2 = $(".jewel_img").find('img').attr("src")` with my answer code, it should work fine. If you're getting an empty array, you might be [running the code too early](https://stackoverflow.com/q/14028959/283366) — Phil, Feb 14 '22 at 04:55

Jquery get image src array

1 Answers1