Question

所以我在这里遇到了一些麻烦，并且很难解决这个难题。

以下是我要做的事情：

有一个容器div（id = posts）充满了其他div（name = posts）。我想让它抓住那些div，并通过偶数/奇数位置将它们附加到其他2个div中。

这两个其他div是由javascript生成的，一个漂浮在左边，另一个漂浮在右边。

然后我希望它清空容器div并插入浮动div。

到目前为止，我已经管理了一切，但有一件事;它只使用第一个找到的div ...

以下是HTML代码：

         <div id="posts">
            <div name="posts">
            left
            </div>
            <div name="posts">
            right
            </div>
            <div name="posts">
            left
            </div>
            <div name="posts">
            right
            </div>
            <div name="posts">
            left
            </div>
            <div name="posts">
            right
            </div>
            <div name="posts">
            left
            </div>
            <div name="posts">
            right
            </div>
        </div>

这是我到目前为止一直在使用的脚本：

    <script type="text/javascript">
        var container = document.getElementById("posts");
        var posts = document.getElementsByName("posts");
        var rdiv = document.createElement("div");
            rdiv.style.backgroundColor = "#0F0";
            rdiv.style.cssFloat = "right";
            rdiv.style.clear = "right";
        var ldiv = document.createElement("div");
            ldiv.style.backgroundColor = "#F00";
            ldiv.style.cssFloat = "left";
            ldiv.style.clear = "left";
        for (i=0; i<posts.length; i++){
            if (i%2){
                rdiv.appendChild(posts[i]);
                }else{
                ldiv.appendChild(posts[i]);
                }
            }
            container.innerHTML = "";
            container.appendChild(rdiv);
            container.appendChild(ldiv);
    </script>

现在这样做是因为它通常会创建左右浮动div，但是它只会在第二个div中附加第一个div，其余的都是kabluey，有人可以帮我这个吗？

Answer 1

您遇到的主要问题是：将一个实时元素附加到另一个元素，从原始位置删除该元素，从而导致循环出现问题。

要解决此问题，请将元素存储到临时数组中，只有在循环完成后才将它们附加到相应的div：

    var temp1 = [], temp2 = [];
    for (i=0; i<posts.length; i++){
        if (i%2){
            temp1.push(posts[i]);
            }else{
            temp2.push(posts[i]);
            }
        }
    for(var i = 0; i < temp1.length; i++) {
        rdiv.appendChild(temp1[i]);
    }
    for(var i = 0; i < temp2.length; i++) {
        ldiv.appendChild(temp2[i]);
    }

您可以在此处查看完整的工作示例：http://jsfiddle.net/FqSMw/

找到相应的div，创建新的div并附加找到的div

1 个答案: