javascript - 无法使用 JavaScript/jQuery 将特定的类名分配给 div 集合

Question

嗨)我有一个任务，但只完成了一半，需要一些帮助:

1. 需要制作一 block 10/10 div 的板；
2. 需要为每个div分配一个公共(public)类“box”和一个特定类“box-x-y”，其中x和y是div的坐标；

我无法完成第二个任务(后半部分)，例如对于第一个 div，类应该是“box-1-1”，依此类推，就像我所附的图片中一样。 Image

  for(var i = 0; i < 10; i++) {
      for (var j = 0; j < 10; j++){
          $("<div></div>").addClass("box").appendTo("#carousel");
      }
      $("<div></div>").css("clear", "both").appendTo("#carousel");
  }

.box {
    float:left;
    width:50px;
    height:50px;
    margin-right:2px;
    margin-bottom:2px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="carousel">

  </div>

Answer 1

您已经完成了艰苦的工作，使用字符串连接创建类，然后使用 addClass() 方法。

var cls = 'box-' + (i+1) + '-' + (j+1);
$("<div></div>").addClass("box").addClass(cls).appendTo("#carousel");

注意:我使用了 text() 进行演示

for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    var cls = 'box-' + (i+1) + '-' + (j+1);
    $("<div></div>").addClass("box").addClass(cls).text(cls).appendTo("#carousel");
  }
  $("<div></div>").css("clear", "both").appendTo("#carousel");
}

.box {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 2px;
  margin-bottom: 2px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel">

</div>