取消设置变量，但不会取消设置

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