问题上追加到

Question

我试图使用的jquery .each()和.appendTo()函数来动态地追加.chartBox到每个.paneldiv的div存在于.toprow并指定不同ID对于每个新产生的盒状#chart1，#chart2，#chart3使用以下代码

<div id="toprow"> 
<div class="paneldiv"></div> 
<div class="paneldiv"></div> 
<div class="paneldiv"></div> 
</div> 

<script> 
    $("button").on("click", function() { 
     var rtop = $("#toprow").height(); 

     $("#toprow < .paneldiv").each(function(){ 
       var newDiv = $("<div />", { 
      "class": "chartBox", 
      "id": "chart?" 
     }).css({ 
      "background-color": "yellow", 
      "font-weight": "bolder", 
      "height": rtop+"px", 
      "width" : "100%" 
     }).appendTo("?"); 
    }); 
</script> 

，但我有<问题BR /> 1 - 我如何可以将不同的ID对每个动态添加。 .chartBox？
2 - 如何使用此处的.appendTo()方法将新ID附加到下一个.paneldiv`？

感谢

Answer 1

为each回调可以有指定元素的索引和元素本身两个参数。方便地，你可以使用这些：

<script> 
    $("button").on("click", function() { 
     var rtop = $("#toprow").height(); 

     $("#toprow < .paneldiv").each(function(index, element){ 
      var newDiv = $("<div />", { 
       "class": "chartBox", 
       "id": "chart" + index 
       }) 
      .css({ 
       "background-color": "yellow", 
       "font-weight": "bolder", 
       "height": rtop+"px", 
       "width" : "100%" 
      }) 
      .appendTo(element); 
    }); 
</script> 

除此之外，你也可以自己做一个计数器变量，并使用它。在元素的上下文中调用each的回调，因此变量this也指向该元素。所以下面的代码基本上与上面的代码相同：

<script> 
    $("button").on("click", function() { 
     var rtop = $("#toprow").height(); 
     var index = 0; 
     $("#toprow < .paneldiv").each(function(){ 
      var newDiv = $("<div />", { 
       "class": "chartBox", 
       "id": "chart" + index++ 
       }) 
      .css({ 
       "background-color": "yellow", 
       "font-weight": "bolder", 
       "height": rtop+"px", 
       "width" : "100%" 
      }) 
      .appendTo(this); 
    }); 
</script>