jQuery:构建多div结构

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

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