时间戳

首页 > 解决方案 > 双循环中的jQuery追加方法

javascript - 双循环中的jQuery追加方法

问题描述

我很难用 jQuery 构建一个应该是板的东西。我严格使用 jQuery 来附加我的行和列。我知道我的逻辑最有可能不正确的地方——它基本上在第二个forEach循环中。在这里，我正在创建一个名为的新 divnewSpot并将其附加到row创建的当前。我控制台注销了我的选择器，这是我想要定位$(.row-${row})的正确对象，并且我是一个新的 div 元素。我不确定为什么它无法附加到当前行。我唯一的想法是，以这种方式附加并不意味着idnewSpotrowDOM 上实际上还存在 div。因此，为什么它找不到任何这样命名的 div。在这种情况下，我可以只创建两个单独的方法：一个用于行，一个用于列，但我想先弄清楚这里发生了什么。谢谢！

class Board {
  constructor() {
    this.tiles = [
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];
  }

  buildBoard() {
    this.tiles.forEach((tile, row) => {
      const newRow = $('<div></div>').addClass('row').attr('id', `row-${row}`);
      $('#snake-game-board').append(newRow);
      tile.forEach((spot, col) => {
        const newSpot = $('<div></div>').addClass('col').attr('id', `col-${col}`);
        $(`.row-${row}`).append('<div></div>');
      })
    })
  }
};

const newBoard = new Board();
newBoard.buildBoard();

标签： javascriptjquery

解决方案

您的

$(`#row-${row}`).

选择其类名称为的元素，例如row-2. 但新行：

const newRow = $('<div></div>').addClass('row').attr('id', `row-${row}`);

将其作为ID，而不是作为类。

虽然您可以通过更改为来修复它

$(`#row-${row}`)

仅引用已经存在的新行变量而不是通过 DOM 搜索以再次找到它会更优雅 - 不再需要数字索引 ID（无论如何这都是一种代码味道）。

您可能还想追加newSpot到行，而不是空 div。（newSpot目前未使用）。

this.tiles.forEach((tile) => {
    const newRow = $('<div></div>').addClass('row').appendTo('#snake-game-board');
    tile.forEach(() => {
        $('<div></div>').addClass('col').appendTo(newRow);
    });
});

推荐阅读