How to call two outputs from previous function return

Question

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?

What are you going to be doing with these values? Why do you need them in two separate variables? Consider the answer to those questions before proceeding to use the answers to the duplicate. — Heretic Monkey, Feb 16 '22 at 18:18
Thanks @ControlAltDel your approach is correct. I needed them separately as each value is making up the separate identities of images that a user will merge when merging two NFT's. It's working as expected with the answer below — Heisenberg, Feb 16 '22 at 18:52

score 0 · Accepted Answer · answered Feb 16 '22 at 18:22

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>

Thank you so much this is perfect – Heisenberg Feb 16 '22 at 18:50 — Heisenberg, Feb 16 '22 at 18:50

How to call two outputs from previous function return

1 Answers1