使用 jQuery 动态创建元素

Question

I have a little problem to create elements with jQuery. It's more a algorithm problem than a jQuery problem.

I have an Javascript Array in entry : jsonObj.news I would like to create "x" lines with 3 elements of class item .

Today, the following code create 3 lines but it's not dynamically, and the total length of the array is not threated.

How can i adapt the code to do that ?

// Model for create div news element

function appendModel(news, lineToAppend) {
    var model = '<div class="item"><h2 id="item_text"><span id="titleNews">' + news.title + '</span><span id="urlHidden">' + news.link +'</span></h2><div class="img-div"><img id="item_img" src="' + news.img + '" /></div></div>';
    lineToAppend.append(model);
}

// Build first line
var line1 = $("<div id=\"line1\"></div>");
for (var i=0 ; i<3 ; i++) {
    appendModel(jsonObj.news[i], line1);
}

// Build second line
var line2 = $("<div id=\"line2\"></div>");
for (var i=3 ; i<6 ; i++) {
    appendModel(jsonObj.news[i], line2);
}

// Build third line
var line3 = $("<div id=\"line2\"></div>");
for (var i=6 ; i<9 ; i++) {
    appendModel(jsonObj.news[i], line3);
}

$(line1).appendTo($("#content"));
$(line2).appendTo($("#content"));
$(line3).appendTo($("#content"));

Answer 1

Are you looking for something like this:

// Unchanged from your example
function appendModel(news, lineToAppend) {
    var model = '<div class="item"><h2 id="item_text"><span id="titleNews">' + news.title + '</span><span id="urlHidden">' + news.link +'</span></h2><div class="img-div"><img id="item_img" src="' + news.img + '" /></div></div>';
    lineToAppend.append(model);
}

// New stuff
var lineCount = 3;
for (var j=0; j<lineCount; j++) {
    var line = $('<div id="line'+(j+1)+'"></div>');

    // j*lineCount gives the values 0, 3, 6 to start pull from your news array
    for (var i=0; i<3 ; i++) {
        appendModel(jsonObj.news[j*lineCount + i], line);
    }

    $(line).appendTo($('#content');
}