如何在jQuery中“联接”并遍历2个关联数组？

Question

I have 15 sections (called bases), each section has its own set of the alphabet buttons.

All I'm trying to do is associate the alphabet numbers with the base/section they're in. So for example, if a user clicks the letter "B" under the base 7, I want to return that the user has clicked the letter B located under base 7

I put all the data I need into 2 arrays and generated the alphabet dynamically. Everything works as expected instead I am unable to associate the letter with the base.

You can check the demo below and open the console log and try to click on any button.

Here's my code so far.

And as you will see, I'm trying to return base[i].id from the first forEach loop inside the second alphabet loop.

console.log(alphabet[i].id + ' has been clicked on ' + base[i].id);

This returns the following

A has been clicked on base1
B has been clicked on base2
C has been clicked on base3

But they should all say on base7 because that where the buttons were located.

And to be more precious, the code below is the one that is supposed to bind the 2 arrays because it asks for the base name/number on which to apply the texture

setMaterialUIDPending (base[i].name, AlbedoPBR, alphabet[i].id+"-letter");

I hope I made sense.

 let base = [ { 'id': 'base1', 'btn': 'b1-include', "name": "baseone" }, { 'id': 'base2', 'btn': 'b2-include', "name": "basetwo" }, { 'id': 'base3', 'btn': 'b3-include', "name": "basethree" }, { 'id': 'base4', 'btn': 'b4-include', "name": "basefour" }, { 'id': 'base5', 'btn': 'b5-include', "name": "basefive" }, { 'id': 'base6', 'btn': 'b6-include', "name": "basesix" }, { 'id': 'base7', 'btn': 'b7-include', "name": "baseseven" }, { 'id': 'base8', 'btn': 'b8-include', "name": "baseeight" }, { 'id': 'base9', 'btn': 'b9-include', "name": "basenine" }, { 'id': 'base10', 'btn': 'b10-include', "name": "baseten" }, { 'id': 'base11', 'btn': 'b11-include', "name": "baseeleven" }, { 'id': 'base12', 'btn': 'b12-include', "name": "basetwelve" }, { 'id': 'base13', 'btn': 'b13-include', "name": "basethirteen" }, { 'id': 'base14', 'btn': 'b14-include', "name": "basefourteen" }, { 'id': 'base15', 'btn': 'b15-include', "name": "basefifteen" }, ]; let alphabet = [ { "id":"A", "url":"https://example.com/A.png" }, { "id":"B", "url":"https://example.com/B.png" }, { "id":"C", "url":"https://example.com/C.png" } ]; let preview = $('.preview'); $.each(base, function(i, v) { let $collapse = $('<div>', {'class': 'collapse', id: base[i].id}); let $btn = $('<a>', {'href': '#', 'class': 'btn btn-sm btn-primary', id: base[i].btn}); let $letters = $('<div>', {'class': 'letters'}); $btn.text(base[i].btn); preview.append($collapse); $btn.on('click', function() { if($(this).attr('data-click-state') == 1) { $(this).attr('data-click-state', 0); setOpacity(base[i].name, 0.2); } else { $(this).attr('data-click-state', 1); setOpacity(base[i].name, 1); } }); $collapse.append($btn); $collapse.append($letters); $.each(alphabet, function (i, v) { let $href = $("<a>", {id: alphabet[i].id, "class": "btn btn-sm btn-dark", 'href': '#', 'title': alphabet[i].id, 'data-src': alphabet[i].url, 'data-base': base[i].id}); $href.text(alphabet[i].id); $href.on('click', function(){ console.log(alphabet[i].id + ' has been clicked on ' + base[i].id); setMaterialUIDPending (base[i].name, AlbedoPBR, alphabet[i].id+"-letter"); addTexture(alphabet[i].url, 'N-letter', true); }); $letters.append($href); }); }); 

 .preview ul { list-style-type: none; display: flex; flex-wrap: wrap; } .preview ul li { flex: 1 0 25%; margin: 5px; } 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="preview"> <ul> <li id="b1"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base1" role="button" aria-expanded="false" aria-controls="base1">Base 1</a></li> <li id="b2"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base2" role="button" aria-expanded="false" aria-controls="base2">Base 2</a></li> <li id="b3"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base3" role="button" aria-expanded="false" aria-controls="base3">Base 3</a></li> <li id="b4"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base4" role="button" aria-expanded="false" aria-controls="base4">Base 4</a></li> <li id="b5"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base5" role="button" aria-expanded="false" aria-controls="base5">Base 5</a></li> <li id="b6"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base6" role="button" aria-expanded="false" aria-controls="base5">Base 6</a></li> <li id="b7"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base7" role="button" aria-expanded="false" aria-controls="base5">Base 7</a></li> <li id="b8"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base8" role="button" aria-expanded="false" aria-controls="base8">Base 8</a></li> <li id="b9"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base9" role="button" aria-expanded="false" aria-controls="base9">Base 9</a></li> <li id="b10"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base10" role="button" aria-expanded="false" aria-controls="base10">Base 10</a></li> <li id="b11"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base11" role="button" aria-expanded="false" aria-controls="base11">Base 11</a></li> <li id="b12"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base12" role="button" aria-expanded="false" aria-controls="base12">Base 12</a></li> <li id="b13"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base13" role="button" aria-expanded="false" aria-controls="base13">Base 13</a></li> <li id="b14"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base14" role="button" aria-expanded="false" aria-controls="base14">Base 14</a></li> <li id="b15"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base15" role="button" aria-expanded="false" aria-controls="base15">Base 15</a></li> </ul> </div> 

Answer 1

You're using the same iteration variables i and v in both $.each loops. So when you're looping over alphabet , base[i] uses the index in alphabet , not the index in base . You should use different variables.

As I mentioned in the comment, you don't need to index the array, that's the whole point of using $.each -- the callback parameter is the current element of the array. So just use more distinct names than v in each array.

 let base = [ { 'id': 'base1', 'btn': 'b1-include', "name": "baseone" }, { 'id': 'base2', 'btn': 'b2-include', "name": "basetwo" }, { 'id': 'base3', 'btn': 'b3-include', "name": "basethree" }, { 'id': 'base4', 'btn': 'b4-include', "name": "basefour" }, { 'id': 'base5', 'btn': 'b5-include', "name": "basefive" }, { 'id': 'base6', 'btn': 'b6-include', "name": "basesix" }, { 'id': 'base7', 'btn': 'b7-include', "name": "baseseven" }, { 'id': 'base8', 'btn': 'b8-include', "name": "baseeight" }, { 'id': 'base9', 'btn': 'b9-include', "name": "basenine" }, { 'id': 'base10', 'btn': 'b10-include', "name": "baseten" }, { 'id': 'base11', 'btn': 'b11-include', "name": "baseeleven" }, { 'id': 'base12', 'btn': 'b12-include', "name": "basetwelve" }, { 'id': 'base13', 'btn': 'b13-include', "name": "basethirteen" }, { 'id': 'base14', 'btn': 'b14-include', "name": "basefourteen" }, { 'id': 'base15', 'btn': 'b15-include', "name": "basefifteen" }, ]; let alphabet = [ { "id":"A", "url":"https://example.com/A.png" }, { "id":"B", "url":"https://example.com/B.png" }, { "id":"C", "url":"https://example.com/C.png" } ]; let preview = $('.preview'); $.each(base, function(i, cur_base) { let $collapse = $('<div>', {'class': 'collapse', id: cur_base.id}); let $btn = $('<a>', {'href': '#', 'class': 'btn btn-sm btn-primary', id: cur_base.btn}); let $letters = $('<div>', {'class': 'letters'}); $btn.text(cur_base.btn); preview.append($collapse); $btn.on('click', function() { if($(this).attr('data-click-state') == 1) { $(this).attr('data-click-state', 0); setOpacity(cur_base.name, 0.2); } else { $(this).attr('data-click-state', 1); setOpacity(cur_base.name, 1); } }); $collapse.append($btn); $collapse.append($letters); $.each(alphabet, function (i, letter) { let $href = $("<a>", {id: letter.id, "class": "btn btn-sm btn-dark", 'href': '#', 'title': letter.id, 'data-src': letter.url, 'data-base': cur_base.id}); $href.text(letter.id); $href.on('click', function(){ console.log(letter.id + ' has been clicked on ' + cur_base.id); setMaterialUIDPending (cur_base.name, AlbedoPBR, letter.id+"-letter"); addTexture(letter.url, 'N-letter', true); }); $letters.append($href); }); }); 

 .preview ul { list-style-type: none; display: flex; flex-wrap: wrap; } .preview ul li { flex: 1 0 25%; margin: 5px; } 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="preview"> <ul> <li id="b1"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base1" role="button" aria-expanded="false" aria-controls="base1">Base 1</a></li> <li id="b2"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base2" role="button" aria-expanded="false" aria-controls="base2">Base 2</a></li> <li id="b3"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base3" role="button" aria-expanded="false" aria-controls="base3">Base 3</a></li> <li id="b4"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base4" role="button" aria-expanded="false" aria-controls="base4">Base 4</a></li> <li id="b5"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base5" role="button" aria-expanded="false" aria-controls="base5">Base 5</a></li> <li id="b6"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base6" role="button" aria-expanded="false" aria-controls="base5">Base 6</a></li> <li id="b7"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base7" role="button" aria-expanded="false" aria-controls="base5">Base 7</a></li> <li id="b8"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base8" role="button" aria-expanded="false" aria-controls="base8">Base 8</a></li> <li id="b9"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base9" role="button" aria-expanded="false" aria-controls="base9">Base 9</a></li> <li id="b10"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base10" role="button" aria-expanded="false" aria-controls="base10">Base 10</a></li> <li id="b11"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base11" role="button" aria-expanded="false" aria-controls="base11">Base 11</a></li> <li id="b12"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base12" role="button" aria-expanded="false" aria-controls="base12">Base 12</a></li> <li id="b13"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base13" role="button" aria-expanded="false" aria-controls="base13">Base 13</a></li> <li id="b14"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base14" role="button" aria-expanded="false" aria-controls="base14">Base 14</a></li> <li id="b15"><a class="btn btn-sm btn-dark" data-toggle="collapse" href="#base15" role="button" aria-expanded="false" aria-controls="base15">Base 15</a></li> </ul> </div>