通过jQuery For循环问题动态构建DOM

时间:2014-08-28 05:36:42

标签: javascript jquery html

提前道歉......这看起来很简单,但就好像我在for循环中的追加作为一个html方法并覆盖内部html。

$(function () {
    var wrapper = $('<div />', {
        class: 'row'
    }),
    button = $('<div />', {
        class: 'column'
    }),
    buttons = [];
    for (var i = 0; i < 2; i++) {
        var btn = (i % 2)? button.html(i + 1) : button.addClass('last').html(i + 1);
        buttons.push(btn);
        if (i % 2) {
            console.log('buttons', buttons);
            $('.container').append(wrapper.append(buttons));
            console.log('wrapper', wrapper);
            console.log('container', $('.container'));
            buttons = [];
        }
    }
});

Fiddle Here

1 个答案:

答案 0 :(得分:3)

当您在循环外部创建的对象添加到多个元素时,您需要克隆它们,否则您只需将元素从一个位置替换为另一个位置

$(function () {
    var wrapper = $('<div />', {
        class: 'row'
    }),
        button = $('<div />', {
            class: 'column'
        }),
        btn, wr;
    for (var i = 0; i < 5; i++) {
        btn = button.clone().html(i + 1);
        if (i % 2 == 0) {
            wr = wrapper.clone().appendTo('.container');
            btn.addClass('last')
        }
        wr.append(btn)
    }
});

演示:Fiddle