How to call two outputs from previous function return

February 16, 2022

I have a function that is searching for any images that are "checked" and returning the img "Alt" attribute for each checked image.

The output/return is 2 separate numbers.

Request
I’m trying to figure out how to set both outputted numbers as two new variables for a new function I’m writing that will use this img Alt value.

$("#NFTGallery2 > li > input:checked").each(function(){
var imgAtt = $(this).siblings("label").find("img").attr("alt");
console.log(imgAtt);
    return imgAtt
});

//this returns two numbers such as 1  20

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sc-jRQBWg hdgczQ">
    </div>
        <div id="NFTGallery2" class="sc-fubCzh hohBlo" style="text-align: center; color: rgb(255, 29, 236);">
            <li>
                <input type="checkbox" id="myCheckbox2">
                <label for="myCheckbox2"><img alt="2" 'width="256px" height="256px" src="xxxxx"></label></li><li><input type="checkbox" id="myCheckbox10"><label for="myCheckbox10"><img alt="10" 'width="256px" height="256px" src="xxxxx"></label>
            </li>
            <li>
                <input type="checkbox" id="myCheckbox7">
                <label for="myCheckbox7"><img alt="7" 'width="256px" height="256px" src="xxxxx"></label></li><li><input type="checkbox" id="myCheckbox15"><label for="myCheckbox15"><img alt="15" 'width="256px" height="256px" src="xxxxx"></label>
            </li>
            <li>
                <input type="checkbox" id="myCheckbox8">
                <label for="myCheckbox8">
                    <img alt="8" 'width="256px" height="256px" src="xxxxx"></label></li></div>

How do I set the two outputs as Var1 and Var2?

>Solution :

You can use map() which will allow you have an array of elements. You can also make a selector that will keep you from having to do the find inside the each.

const alts = $("#NFTGallery2 > li > input:checked + label img").map(function (){
  return this.alt
}).get();
console.log(alts);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sc-jRQBWg hdgczQ">
    </div>
        <div id="NFTGallery2" class="sc-fubCzh hohBlo" style="text-align: center; color: rgb(255, 29, 236);">
            <li>
                <input type="checkbox" id="myCheckbox2" checked>
                <label for="myCheckbox2"><img alt="2" 'width="256px" height="256px" src="xxxxx"></label></li><li><input type="checkbox" id="myCheckbox10"><label for="myCheckbox10"><img alt="10" 'width="256px" height="256px" src="xxxxx"></label>
            </li>
            <li>
                <input type="checkbox" id="myCheckbox7">
                <label for="myCheckbox7"><img alt="7" 'width="256px" height="256px" src="xxxxx"></label></li><li><input type="checkbox" id="myCheckbox15"><label for="myCheckbox15"><img alt="15" 'width="256px" height="256px" src="xxxxx"></label>
            </li>
            <li>
                <input type="checkbox" id="myCheckbox8" checked>
                <label for="myCheckbox8">
                    <img alt="8" 'width="256px" height="256px" src="xxxxx"></label></li></div>