javascript - 关于附加到的问题

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>

但我有
问题1 - 如何为每个动态添加的 ..chartBox 应用不同的 ID？
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>