Question

使用jQuery创建元素有点问题。它比jQuery问题更像算法问题。

我在条目中有一个Javascript Array： jsonObj.news 我想创建“x”行，其中包含3个 item 元素。

今天，下面的代码创建了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');
}

使用jQuery动态创建元素

1 个答案: