取消設置變量，但不會取消設置

Question

下面是代碼片段。我正在嘗試創建16 x 16網格div，並且在每隔15次嘗試添加一條新線條之後。爲了做到以下幾點，我在每16個元素上添加一個值爲'change'的行類。但它不會起作用，我所有的前240個元素的'line'類將有'change'值，最後16個元素的值爲''。至於用於行的console.log顯示正確的行爲（即每15個空後有顯示的變化）

$(document).ready(function() { 
    createDivs(16); 
}); 

var createDivs = function (grids) { 
    for (var i = 0; i < grids; i++) { 
     var j = 0; 
     var line = ''; 
     for (; j < grids; j++) { 
      var grid = '<div id=' + i + '' + j + '></div>'; 
      if (j === 0) { 
       line = 'change'; 
      } 
      console.log(line); 
      $('#container').append(grid); 
      $('#container > div').addClass('grid-class'); 
      $('#container > div').addClass(line); 
      line = null; 
     } 
    } 
} 

Answer 1

此：

$('#container > div').addClass(line); 

將那類添加到每一個DIV與選擇器匹配的。當line爲null時，不添加任何新東西，但都不刪除任何東西。

一個清理的變種，也不再重複添加grid-class到每一個div，應該是：

var ctr = $('#container'); 

for (var i = 0; i < grids; i++) { 
    for (var j = 0; j < grids; j++) { 
    var grid = $('<div id=' + i + '' + j + '></div>') 
     .addClass('grid-class'); 

    if (j == 0) 
     grid.addClass('change'); 

    ctr.append(grid); 
    } 
} 

Answer 2

$('#container').append(grid); 
$('#container > div').addClass('grid-class'); 
$('#container > div').addClass(line); 

你選擇所有的div的，不只是最近的一個。你可以解決簡單地通過增加:last選擇：

$('#container').append(grid); 
$('#container > div:last').addClass('grid-class'); 
$('#container > div:last').addClass(line); 

您可以通過做這一切創造出grid一個jQuery對象上也簡化了這一點：

$(grid).addClass('grid-class').addClass(line).appendTo('#container');