Question

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

需要制作一个10/10 div的董事会;
需要为每个div分配一个公共类“box”和一个特定的“box-x-y”，其中x和y是div的坐标;

我不能做第二个任务（后半部分），例如对于第一个div，该类应该是“box-1-1”，依此类推，就像我附上的图片一样。 Image

.imageSlide-container {
     max-width: 1000px;
     position: relative;
     margin: auto;
 }

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

Answer 1

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

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

注意：我已使用text()进行演示

＆＃13;

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");
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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");
  }

Answer 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");
  }

Answer 4

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

＆＃13;

  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");
  }

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: