Создание динамической сетки с jquery

Question

Я пытаюсь создать динамическую сетку с использованием jquery, где она в конечном итоге изменится с использованием пользовательского ввода (например, 16x16, 32x32 и т. Д.). Моя логика состоит в том, чтобы создать 16 строк, а затем 16 квадратов в каждой строке, но у меня возникли проблемы с получением квадратов для добавления правильной суммы.

$(document).ready(function() { 
    for (var i = 0; i < 16; i++) { 
     $('.grid').append("<div class = 'row'></div>"); 
     //$('.row').width(($('.square').width().val() * i); 
     //for (var i = 0; i < 16; i++) { 
      $('.row').append("<div class='square'></div>"); 
    // } 
    } 
}); 

Вот ссылка на то, что он выглядит следующим образом: https://lettda.github.io/EtchAsketch/

Answer 1

Перемещения вашего внутреннего цикла снаружи внешней для контура должны создать надлежащее количество квадратов, как таковые:

for (var i = 0; i < 16; i++) { 
    $('.grid').append("<div class = 'row'></div>"); // Each grid gets 16 rows 
} 

for (var i = 0; i < 16; i++) { 
    $('.row').append("<div class='square'></div>"); // Each row gets 16 squares 
} 

Явной установку ширины строка не требуется, так как она автоматически будет в 16 раз больше ширины вашего квадрата плюс добавление дополнений/полей. Обратите внимание, что все ваши квадраты нуждаются в display: inline-block; в CSS, чтобы убедиться, что они бок о бок. Кроме того, строки будут обертываться, если в каждой строке слишком много квадратов, или квадраты слишком широкие.

Answer 2

.row выбирает все элементы, которые имеют класс row, который означает, что вы не прилагая .squarediv S только последней созданной строки , вы добавляете их ко всем ранее созданным.

Чтобы предотвратить это, вы можете сделать что-то подобное.

for (var i = 0; i < 16; i++) { 
    var row = $("<div class = 'row'></div>"); 
    for (var j = 0; j < 16; j++) { 
     var square = $("<div class='square'></div>"); 
     row.append(square); 
    } 
    $('.grid').append(row); 
} 

ИЛИ

for (var i = 0; i < 16; i++) { 
    $('.grid').append("<div class='row' id='row"+i+"'></div>"); 
    for (var j = 0; j < 16; j++) { 
     $('#row'+i).append("<div class='square'></div>"); 
    } 
}