問題上追加到

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>