Question

我正在尝试使用jquery .each()和.appendTo()函数动态地将.chartBox附加到.paneldiv中存在的每个.toprow div并指定#chart1，#chart2，#chart3新生成的每个框添加>不同ID

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

但我在＆lt; br /＆gt; 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>

附加问题

1 个答案: