Jquery 获取图片源数组

Question

我正在用 discord.js 制作一个不和谐的机器人。 jQuery get the image src

查找了最相关的文章，但它与我想要做的不同。

我想在 span 标签中按数组接收 img 的几个 src。

<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 同时获得 lv.5 和 ex) lv.5lv.5。 jewel2 只接收一个 src.

怎么带？

控制台

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

Answer 1

jQuery 的 .attr() 的问题是...

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

相反，您可以使用 jQuery 的 .map() 将元素集合转换为数组

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>

您甚至可能想以类似的方式处理文本并将所有数据收集到对象中

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>

Jquery 获取图片源数组

Jquery get image src array

javascript

jquery

node.js

discord

discord.js