Question

以下是代码段。我正在尝试创建16 x 16网格div，每15次我尝试添加一个新行。为了做到以下几点，我添加的行类值为＆＃39;更改＆＃39;每16个元素。但是它不会起作用，我所有的前240个元素都会有价值的变化＆＃39;对于＆＃39;行＆＃39; class和最后16个元素将具有值＆＃39;＆＃39;。按照预期，该行的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，而不仅仅是最新的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');

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

2 个答案: