Question

我写了这个方法：

var printWords = function(){
    for(i = 0; i < words.length; i++){
        block = document.createElement("blockquote");

        p = document.createElement("p");
        p.innerHTML = words[i]["word"];

        small = document.createElement("small")
        small.innerHTML = words[i]["translation"];

        block.appendChild(p);
        block.appendChild(small);

        document.getElementById('siteContent').appendChild(block);
    } 
}

Wich为这样的单词中的每个元素创建：

<blockquote>
    <p>to great somebody</p>
    <small>jemanden grüßen</small>
</blockquote>

我现在的问题是如何改进或更好地说改变我的for循环以便总是将这些元素中的三个变成这样的div？谢谢！

<div class="row">
   //three of the above blockquotes
</div>

Answer 1

也许尝试这样的事情：

var printWords = function(){
    var row, block, p, small;
    for(i = 0; i < words.length; i++){
        if ((i % 3) == 0) {
            row = document.createElement("div");
            row.setAttribute("class", "row");
            document.getElementById('siteContent').appendChild(row);
        }

        block = document.createElement("blockquote");

        p = document.createElement("p");
        p.innerHTML = words[i]["word"];

        small = document.createElement("small")
        small.innerHTML = words[i]["translation"];

        block.appendChild(p);
        block.appendChild(small);

        row.appendChild(block);
    } 
}

Demonstration

Answer 2

divblock = document.createElement("blockquote");
divblock.setAttribute("class", "row");
var printWords = function() {
    for(i = 0; i < words.length; i++) {

        block = document.createElement("blockquote");

        p = document.createElement("p");
        p.innerHTML = words[i]["word"];

        small = document.createElement("small")
        small.innerHTML = words[i]["translation"];

        block.appendChild(p);
        block.appendChild(small);

        //Add block to the div
        divblock.appendChild(block);

        if ( (i%3) == 2) {
            //Render the previous div
            document.getElementById('siteContent').appendChild(divblock);
            //Create a new div block
            divblock = document.createElement("div");
            divblock.setAttribute("class", "row");
        }
    } 
}

Answer 3

我只是在i％3上添加一个条件。所以像这样：

var printWords = function(){
    div = document.createElement("div") //create a div to start

    for(i = 0; i < words.length; i++){
        block = document.createElement("blockquote");

        p = document.createElement("p");
        p.innerHTML = words[i]["word"];

        small = document.createElement("small")
        small.innerHTML = words[i]["translation"];

        block.appendChild(p);
        block.appendChild(small);

        div.appendChild(block);

        //run this each third loop or the last time through the loop
        if((i+1)%3 === 0 || i === words.length-1){  

          //Append your div to siteContent;
          document.getElementById('siteContent').appendChild(div);  

          //reset your div
          div = document.createElement("div"); 
        }
    }

}

Answer 4

注意： - 我在通过上述回复了解主要问题后编辑了这个答案。

var printWords = function(){
        var divTag = document.createElement('div');
          divTag.className = "row"; 
        for(i = 1; i <= words.length; i++){
            block = document.createElement("blockquote");

            p = document.createElement("p");
            p.innerHTML = words[i]["word"];

            small = document.createElement("small")
            small.innerHTML = words[i]["translation"];

            block.appendChild(p);
            block.appendChild(small);
            divTag.appendChild(block);

            if((i % 3) == 0){
                document.getElementById('siteContent').appendChild(divTag); 
                divTag = document.createElement('div');
                divTag.className = "row";   
            }
        }
    }

将for循环中的三个元素包装到div中

4 个答案: