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

【问题标题】：Can't assign a specific class name to a collection of div's using JavaScript/jQuery无法使用 JavaScript/jQuery 将特定的类名分配给 div 的集合
【发布时间】：2017-12-10 09:53:05
【问题描述】：

嗨）我有一个任务，只完成了一半，需要一些帮助：

需要制作一个 10/10 div 的板子；
需要为每个 div 分配一个公共类“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>

【问题讨论】：

你试过这个addClass("box"+i+j) 吗？

标签： javascript jquery html class coordinates

【解决方案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>

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案3】：

for(var i = 0; i < 10; i++) {
      for (var j = 0; j < 10; j++){

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

【讨论】：

【解决方案4】：

正如我在评论中所说，您可以通过在 addclass 函数 addClass("box box-"+i+"-"+j) 中添加 for 循环变量来做到这一点。现在我们在 div .box 和 .box-dynamic-number 中添加两个类，第一个类在 div 上应用 css，第二个是您的要求。

  for(var i = 0; i < 10; i++) {
      for (var j = 0; j < 10; j++){
       
          $("<div>box-"+i+"-"+j+"</div>").addClass("box box-"+i+"-"+j).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>

【讨论】：