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

下面是代码片段。我正在尝试创建16 x 16的网格div，每15格之后，我尝试向其添加新行。要执行以下操作，我将在第16个元素上添加具有值“ change”的线类。但这是行不通的，我所有的前240个元素的'line'类的值都将为'change'，而后16个元素的值将为'。如预期的那样，该行的console.log显示正确的行为（即，每隔15个null后显示更改）

$(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;
        }
    }
}

最佳答案

这个：

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

关于javascript - 取消设置变量，但不会取消设置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27929456/