Add elements from an array to other arrays

Question

Add elements from an array to other arrays

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I want to add 3 elements to each empty array preferably using the splice method with the proviso 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 to arr .length equals 0. That's what I wanted to say since yesterday but I'm a beginner in this world. I know it's not too difficult but I tried and I could not. A thousand excuses to all who have already 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 arr elements I want to get from an array and add to the empty arrays. for example I get the first 3 indices and add it to array1, I get 3 indices and add it to array2, I get the last 3 indices and add it to 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 there tb had problem pk n could implement the loop. In the game I have to shuffle the cards, give the cards, predict the plays, add up the value of the cards, what can I do with javascript? In your opinion, what is the best way to do it?

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>

javascript

asked by anonymous 11.01.2015 / 23:38

2 answers

2

Based on your information if instead of data1, data2, data3 use only an array with all data's the following method 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:

11.01.2015 / 23:56

PHP Generate Popup Confirmation [Closed] How to create a multi-image page? One over the other [closed]

score 1 · Accepted Answer

A starting point could be this example I did: link

In the background, use the divs you mentioned as the basis, and within each iteration of these divs you have a for loop that runs 3 times. At each iteration of this for within .each() it generates new HTML to be included in the divs.

In this example ( I mentioned above ) it uses a sprite that # but if you already have background for the images you can ignore it.

If you have an array with all the cards (eventually already drawn) then filling these 4 divs 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;
});

Example live: link

Notice that in the example I'm using the positions in the array. You might have the url of the images in the array, so you have to make a small adjustment to my example. But keep in mind that a sprite only loads once, making the page load much lighter.