Question

我想用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++;
});

Answer 1

可以这样做：

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");
}

DEMO： http://jsfiddle.net/SyLKc/

Answer 2

假设“容器”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标签末尾的>。

Answer 3

这个怎么样：

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

Answer 4

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++; 
});

jQuery：构建多div结构

4 个答案: