将dom插入另一个dom作为变量

Question

我一直在尝试摆脱这种情况：

stackUp = function(a){
    var stack = "";
    stack += "<div class='stackWrap'>";
    stack += "<div class='stackInfo'></div>";
    stack += "<div class='stackBox'>";
    stack += "</div>";
    stack += "</div>";
    for(var i=0;i<a.length;i++){ $(stack).find("stackBox").append(a[i].box); }
    return $(stack);
}

我要做的就是将对象中的每个框插入“ stack”中记得的“ stackBox” div中，有人可以帮助我吗？

Answer 1

在循环中，在每次迭代中，您都在创建一个新的jQuery对象并对其进行修改。 但是这些更改不会反映在字符串stack 。 最后，您要从字符串stack中创建一个新的dom结构并返回它，因此循环中的任何更改都不会反映在返回的对象中

stackUp = function (a) {
    var stack = "";
    stack += "<div class='stackWrap'>";
    stack += "<div class='stackInfo'></div>";
    stack += "<div class='stackBox'>";
    stack += "</div>";
    stack += "</div>";
    var $stack = $(stack);
    for (var i = 0; i < a.length; i++) {
        $stack.find(".stackBox").append(a[i].box);
    }
    return $stack;
}

Answer 2

stackUp = function(a){
    var stackWrap = $("<div class='stackWrap'><div class='stackInfo'></div></div>")
    var stackBox = $("<div class='stackBox'></div>");

    for(var i=0;i<a.length;i++){
        stackBox.append(a[i].box);
    }

    stackWrap.append( stackBox );

    return stackWrap;
}