Estoy haciendo un bot de discordia con discord.js. jQuery obtener la imagen src
busqué el artículo más relevante, pero es diferente de lo que estoy tratando de hacer.
Me gustaría recibir varios srcs de img en la etiqueta span por matriz.
<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);joya recibe tanto lv.5 y ex) lv.5lv.5. jewel2 solo recibe un src.
¿Cómo debo traerlo?
consola
jewel : Lv.5Lv.5 jewel2 : https://xxx/60.pngEl problema con .attr() de jQuery es...
Obtenga el valor de un atributo para el primer elemento en el conjunto de elementos coincidentes
En su lugar, puede usar .map() de jQuery para transformar una colección de elementos en una matriz
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>Es posible que incluso desee tratar el texto de manera similar y recopilar todos los datos en objetos.
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>