Shift data in multidimensional array I'm currently facing a problem where I have to shift data in a multidimensional JS array in different directions, but I think the first solution I whipped up is not as efficient as it could be (some fancy math I don't know of maybe?).

Let me explain the problem a bit better with some examples of my data.

This is the array in question:

[1][0][1][0][1][0]
[0][1][1][0][0][0]
[0][0][1][0][1][1]
[0][0][0][0][1][1]
[0][0][1][1][0][0]
[1][0][0][1][1][1]


If I shifted it to the left, it should look like this:

[1][1][1][0][0][0]
[1][1][0][0][0][0]
[1][1][1][0][0][0]
[1][1][0][0][0][0]
[1][1][0][0][0][0]
[1][1][1][1][0][0]


Or down

[0][0][0][0][0][0]
[0][0][0][0][0][0]
[0][0][1][0][1][0]
[0][0][1][0][1][1]
[1][0][1][1][1][1]
[1][1][1][1][1][1]


To put it simple - shift 1's as far as possible.

The code I wrote is fairly simple

for (w = 0; w &lt; arraySize; w++) {
    for (h = 0; h &lt; arraySize; h++) {
        tiles = $('.arrayContainer .row').eq(w).children();
        if (tiles.eq(h).html() != "" &amp;&amp; tiles.eq(h - 1).html() == "" &amp;&amp; (h-1) &gt;= 0) {
            tiles.eq(h - 1).html(tiles.eq(h).html());
            tiles.eq(h).html("");
        }
    }
}


This will shift values left-to-right by one step. arraySize is the variable that determines the size of the array, tiles gets each row of the array output.

If I wasn't here, posting and wouldn't think this could be done better I'd create four of these structures and just live with it, but I'm pretty sure this can be done better.
From a once over:


You should consider MVC, your data should live in an object you created, you should update your model, and then from your model update the UI
If you dont want to do this, then you should at least find all cells and assign each cell to a 2d JS array

var tiles = [];
for (w = 0; w &lt; arraySize; w++) {
    tiles[w] = [];
    for (h = 0; h &lt; arraySize; h++) {
        tiles[w][h] = $('.arrayContainer .row').eq(w).children().eq(h);
    }
}


Otherwise you are executing $('.arrayContainer .row') far too many times, and that operation takes a lot of time, then you can do your logic like this:

for (w = 0; w &lt; arraySize; w++) {
    for (h = 0; h &lt; arraySize; h++) {
        tile = tiles[w][h]
        if (tile.html() != '' &amp;&amp; tiles[w][h-1].html() == '' &amp;&amp; (h-1) &gt;= 0) {
            tiles[w][h-1].html(tile.html());
            tile.html('');
        }
    }
}


You could consider assigning tiles[w][h-1] to a variable as well to make it more readable
Consider c and r as variables ( column and row if you are feeling verbose ). Those are better names than height and width.
I hope you declared tiles with var somewhere else, otherwise you have global namespace pollution.
As for not having to repeat the same 2 loops for every direction, you could think about passing a columnDelta and RowDelta ( for your 2 loops, columnDelta would be -1, rowDelta would be 0 ) I am not sure it is worth it, since you only have 4 cardinal directions, up to you.