CODEWITHSUNDEEP
javascriptjquerygridfrontend
FranGoitia
FranGoitia

Reputation: 1993

Creating Grid on the fly with jquery

I'm new to frontend and I'm trying to practice doing this simple task: I have to create a grid on the fly that is n * n (n being inputed by the user).

I succesfully created a fix sized grid, but my problem is when trying to do this dynamically.

This is the code I wrote for a 3*3 grid: http://jsfiddle.net/y7c2h8yk/

For trying to create it dynamically I wrote the following function:

var setGridDimensions = function(n) {
    // emptying current grid
    $(".row").empty();
    var $grid = $("#grid");
    for (var i = 0; i < n; i++) {
        // adding row
        $grid.append('<div class="row">');
        // adding each to element to row
        **var $row = $(".row")[i];**
        for (var j = 0; j < n; j++) {
            $row.append('<div class="col"></div>');
        }
    }
};

Now, I understand there is a problem with line var $row = $(".row")[i]. What I need is inside the loop first create the row, then select the row created and then loop again and create each column. How can i do that ?

Any help would be really appreciated. Thanks.

Upvotes: 3

Views: 2298

Answers (4)

user1978456
user1978456

Reputation: 22

use isotope http://isotope.metafizzy.co/ it uses the help of Javascript but it is very popular, so you will find plenty of docs

if you find it very complicated then there are many premium plugins that based their development on isotope already, for example the Media Boxes http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020

Upvotes: -1

Artur Filipiak
Artur Filipiak

Reputation: 9157

You don't have to force jQuery to search for the .row element in the DOM tree n times. You have easy way to cache the element by setting it as variable.

Another thing, is that you should empty() the whole #grid element instead of .row. empty() method remove contents of the element, but not the element itself.

Alternatively, you could remove rows using $(".row").remove();

Code (I would however use the next one)

var setGridDimensions = function(n) {
    var $grid = $("#grid").empty();
    for (var i = 0; i < n; i++) {
        // create .row and cache it setting as '$row' variable:
        var $row = $('<div class="row"/>').appendTo($grid);
        for (var j = 0; j < n; j++) {
            $row.append('<div class="col"></div>');
        }
    }
};

DEMO

This would be faster than the one above, as it's single DOM modification:

var setGridDimensions = function(n) {
    var html ='';
    for (var i = 0; i < n; i++) {
        html += '<div class="row">';
        for (var j = 0; j < n; j++) {
            html += '<div class="col"></div>';
        }
        html += '</div>';
    }
    // modify the DOM only once:
    $("#grid").html(html);
};

DEMO

Upvotes: 2

Michael Dziedzic
Michael Dziedzic

Reputation: 543

Here's a way to do it without jQuery.

https://jsfiddle.net/lemoncurry/evxqybaL/1/

<div id="grid-holder"></div>

-

#grid-holder {
    width: 100%;
}

.row {
    clear: left;
    background-color: red;
}

.cell {
    width: 50px;
    height: 50px;
    border: 1px dashed blue;
    float: left;
}

-

var gridly = function (n) {
    var grid = document.getElementById("grid-holder");
    for (var i = 0; i < n; i++) {
        var row = document.createElement('div');
        row.classList.add("row");
        grid.appendChild(row);
        for (var j = 0; j < n; j++) {
            var cell = document.createElement('div');
            cell.classList.add("cell");
            row.appendChild(cell);
        }
    }             
}

gridly(5);

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

$(".row")[i] get the HTML element. So late, the $row.append('<div class="col"></div>'); will not work since .append() is a jQuery method.

If you want to select a specific index and keep it as a jQuery object, use .eq() :

var $row = $(".row").eq(i);
for (var j = 0; j < n; j++) {
    $row.append('<div class="col"></div>');
}

Upvotes: 1

Related Questions