使用 jQuery 動態創建元素

Question

我在使用 jQuery 創建元素時遇到了一個小問題。 它更像是一個算法問題而不是一個 jQuery 問題。

我在條目中有一個 Javascript Array ： jsonObj.news我想用 3 個類item 的元素創建“x”行。

今天，下面的代碼創建了 3 行，但不是動態的，數組的總長度沒有受到威脅。

我怎樣才能修改代碼來做到這一點？

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

你在尋找這樣的東西：

// 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');
}