Add array elements to other arrays

Question

I want to add 3 elements to each empty preference array using the splice method on the condition that when data1 has 3 elements it jumps to data2 and adds 3 elements and when data2 has 3 elements it jumps to data3 and adds until arr.length is equal to 0. That’s what I’ve wanted to say since yesterday, but I’m new to this world. I know it’s not hard but I’ve tried and I couldn’t. A thousand apologies to all who have answered my question.

What I want is to create a function so I can add the elements to the 3 empty arrays at the same time. Exactly I do not want to copy the elements of the arr I want to take from an array and add to the empty arrays. for example take the first 3 indices and add in array1, take 3 indices and add in array2, take the last 3 indices and add in array3 but all at the same time.

i want to create a simple card game but with images so I have this array of images and the Divs with different class representing each player as I could not pass the images directly to the Divs I decided to create 4 arrays for each player but then tb had problem pk n was able to implement the loop. In the game I have to shuffle the cards, deal the cards, predict the moves, add up the value of the cards can I do with javascript? In your opinion what the best way to do?

var arr = [];

arr[0]='<img class="images" src="1.jpg">';      
arr[1]='<img class="images" src="2.jpg">';
arr[2]='<img class="images" src="3.jpg">';
arr[3]='<img class="images" src="4.jpg">';
arr[4]='<img class="images" src="5.jpg">';
arr[5]='<img class="images" src="6.jpg">';
arr[6]='<img class="images" src="7.jpg">';
arr[7]='<img class="images" src="8.jpg">';
arr[8]='<img class="images" src="9.jpg">';
arr[9]='<img class="images" src="10.jpg">';
arr[10]='<img class="images" src="11.jpg">';
arr[11]='<img class="images" src="12.jpg">';

The result would be this:

js

var data1 = ['elemento1','elemento2','elemento3'];
var data2 = ['elemento4','elemento5','elemento6'];
var data3 = ['elemento7','elemento8','elemento9'];
var data4 = ['elemento10','elemento11','elemento12'];

html

<div id="geral" >

    <div id="posi1" class="div_um"></div>   
    <div id="posi2" class="div_dois"></div> 
    <div id="posi3" class="div_tres"></div>
    <div id="posi4" class="div_quatro"></div>

</div>

Answer 1

On the basis of their information data1, data2, data3 use only one array with all data's the method below can solve your problem:

        var arr = [];

        arr[0]='<img class="images" src="1.jpg">';      
        arr[1]='<img class="images" src="2.jpg">';
        arr[2]='<img class="images" src="3.jpg">';
        arr[3]='<img class="images" src="4.jpg">';
        arr[4]='<img class="images" src="5.jpg">';
        arr[5]='<img class="images" src="6.jpg">';
        arr[6]='<img class="images" src="7.jpg">';
        arr[7]='<img class="images" src="8.jpg">';
        arr[8]='<img class="images" src="9.jpg">'; 

        var dataX = [];

        for(var i = 0; i < arr.length; i+=3) {
            dataX.push(arr.slice(i, i+3));
        }

The result would be the variable dataX with the arrays of three elements:

Answer 2

A starting point could be this example I made: http://jsfiddle.net/s4Lbmgp9/

In the background it uses the Divs you mentioned, and within each iteration of these Divs you have a cycle for running 3 times. Every iteration of that for within the .each() it generates new HTML to be included in Divs.

In this example (that I mentioned above) he uses an Sprite that found here but if you already have background for the images you can ignore.

If you have an array of all the cards (eventually already drawn) then filling these 4 cards with these cards is even simpler. You can use it like this (a simplified version of the example above):

$('#geral > div').each(function (i) {
    var html = '';
    for (var j = 0; j < 3; j++) {
        html += '<div class="carta" style="background-position: ' + cartas[i + j] + '"></div>';
       // ou se tiveres HTML dentro dessa array simplesmente:
       // html += cartas[i + j];
    }
    this.innerHTML = html;
});

Live example: http://jsfiddle.net/2acv5m36/

Note that in the example I am using the positions in the array. You may have the url of the images in the array, then you have to make a small adaptation to my example. But take into account that an Sprite only loads once, making the page load much lighter.