0

我想用 jQuery 构建这个 html 结构：

<div id="container">
    <div id="row0">
        <div id="start0"></div>
        <div id="end0"></div>
    </div>
    <div id="row1">
        <div id="start1"></div>
        <div id="end1"></div>
    </div>
</div>

这就是我所做的，但它很丑陋并且没有按预期工作。你能帮我么。谢谢你。

var count = 0;
$("#target").click(function() {
    $('#container').append($('<div></div>')
                    .attr({ id : "row" + count })
                    .addClass("test"));

    for (var i = 0; i < 2; i++) {
        $("#row" + count).append('<div id="start' + count + '</div');
        $("#row" + count).append('<div id="end' + count + '</div');
    } 
    count++;
});
4

4 回答 4

5

可以这样做：

for (var i = 0; i < 2; i++) {
    var start = $("<div />", { id : "start" + i });
    var end = $("<div />", { id : "end" + i });
    $("<div />", { id : "row" + i }).append(start, end).appendTo("#container");
}

演示：http: //jsfiddle.net/SyLKc/

于 2012-07-11T08:10:48.850 回答
1

假设“容器” div 已经存在，并且想法是每次单击“目标”（无论是什么）时，您都想在“容器”div 的末尾添加一个孩子，那么停止代码工作的主要因素是您使用了currentRow尚未定义的变量。将其更改为count并丢失 for 循环：

var count = 0;
$("#target").click(function() {
    $('#container').append($('<div></div>')
                    .attr({ id : "row" + count })
                    .addClass("test"));

    $("#row" + count).append('<div id="start' + count + '"></div>');
    $("#row" + count).append('<div id="interval' + count + '"></div>');

    count++;
});

这可以通过不重新选择新 div 两次来提高效率：

var count = 0;
$("#target").click(function() {
    $('<div></div>').attr({ id : "row" + count })
                    .addClass("test")
                    .appendTo("#container")
                    .append('<div id="start' + count + '"></div>')
                    .append('<div id="interval' + count + '"></div>');        
    count++;
});

确保上述内容已在准备好的文档中或正文末尾的脚本块中。

正如 bažmegakapa 指出的那样，您缺少>内部 div 标签末尾的 。

于 2012-07-11T08:14:37.573 回答
0 
var count = 0; 
$("#target").click(function() { 
    $('#container').append('<div id="row'+ count +'" class="test"></div>')
    for (var i = 0; i < 2; i++) { 
        $("#row" + count).append('<div id="start' + count + '></div>'); 
        $("#row" + count).append('<div id="end' + count + '></div>'); 
    }
    count++; 
});
于 2012-07-11T08:27:36.493 回答
0

那这个呢：

var count = 0;
$("#target").click(function() {

  var $currentRow = $('<div/>').attr({ id : "row" + count }).addClass("test")

  for (var i = 0; i < 2; i++) {
      $currentRow.append('<div id="start' + count + '"></div>');
      $currentRow.append('<div id="interval' + count + '"></div>');
  } 

  $('#container').append($currentRow);

  count++;
});

jsfiddle ​</p>

于 2012-07-11T08:17:45.650 回答