Создание сетки на лету с jquery

Question

Я новичок в интерфейсе, и я пытаюсь практиковать эту простую задачу: мне нужно создать сетку «на лету», которая n * n (n вводится пользователем) ,

Я успешно создал сетку размера фиксированного размера, но моя проблема заключается в попытке сделать это динамически.

Это код, который я написал для 3 * 3 сетки: http://jsfiddle.net/y7c2h8yk/

За попытку создать динамически я написал следующую функцию:

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>'); 
     } 
    } 
}; 

Теперь я понимаю, что есть проблема с line var $row = $(".row")[i]. То, что мне нужно, внутри цикла, сначала создайте строку, затем выберите созданную строку, а затем снова запустите и создайте каждый столбец. Как я могу это сделать ?

Любая помощь была бы действительно оценена. Благодарю.

Answer 1

Вам не нужно заставлять JQuery искать .row элемента в дереве DOM n раз , У вас есть простой способ: cache элемент, задав его как переменную.

Другое дело, что вы должны empty() весь элемент #grid вместо .row. empty() метод удаляет содержимое элемента, но не сам элемент.

В качестве альтернативы, вы можете удалить строки с помощью $(".row").remove();

• .empty() reference
• .remove() reference

---

код (я бы, однако, использовать следующий)

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

Это будет быстрее, чем предыдущий, так как это одиночный модификация DOM:

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

Answer 2

$(".row")[i] получить элемент HTML. Так поздно, $row.append('<div class="col"></div>'); не будет работать, поскольку .append() - это метод jQuery.

Если вы хотите, чтобы выбрать конкретный индекс и сохранить его как объект JQuery, используйте .eq():

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

Answer 3

Вот способ сделать это без 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); 

Answer 4

использование изотопа http://isotope.metafizzy.co/ использует помощь Javascript, но он очень популярен, так что вы найдете множество документации

, если вы считаете это очень сложным, есть много плагинов премиум-класса, основанных на их разработке на изотопе, например, медиа-боксы http://codecanyon.net/item/media-boxes-responsive-jquery-grid/5683020