вложенные для цикла только один раз

Question

Я использую javascript и jquery для создания простой сетки 40x40.

Вот мой вложенным для цикла, чтобы сделать это:

function display_grid() { 
     browser_grid='' 
     $visible_grid = $('#grid'); 

     for(i=0;i<40;i++){ 
      $visible_grid.append('<div>'); 
      for(i=0;i<40;i++){ 
       $visible_grid.append("<div class='square'> </div>"); 
      } 
      $visible_grid.append('</div>'); 
     } 

Я ожидаю, что это создать 40 дивы каждый с 40 дивы внутри каждого из них. В браузере отображается только одна строка с 40 div.

<div> 
    <div class="square></div> 
    <div class="square></div> 
    <div class="square></div> 
    ... 
</div> 

Это то, что я хочу, но это сорок раз. Я не очень разбираюсь в JS, поэтому я смущен тем, почему первый цикл не выполняется 40 раз.

Answer 1

Для внутреннего цикла вам нужно другое имя переменной.

function display_grid() { 
    browser_grid=''; 
    $visible_grid = $('#grid'); 

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

Edit: Добавлен код. Обратите внимание, что вы должны использовать ключевое слово var для подсчета переменных в ваших for-loop.

Что произошло в вашем коде, так это то, что после создания 40 внутренних divs счетчик i равен 40, а условие для внешнего цикла больше недействительно, таким образом, выходя из этого кодового блока.

Answer 2

Спасибо за помощь, ребята!

Изменен переменный для моего внутреннего контура зафиксировали проблему, но возникла проблема с использованием .append()

По-видимому, не поддерживают частичную разметку, так что вместо этого я просто приложил все мои дивы к строка вместо.

for(var i=0;i<40;i++){ 
      browser_grid+='<div>'; 
      for(var x=0;x<40;x++){ 
       browser_grid+="<div class='square'> </div>"; 
      } 
      browser_grid+='</div>'; 
     } 

     $visible_grid.append(browser_grid) 

После чего, я приложил строку в $ visible_grid

Это, казалось, делать то, что я хотел, чтобы это сделать. Просто хотел указать на кого-либо другого, используя метод append для этой цели.