javascript - 如何在for循环中每3次添加一个换行符

Question

在天气小部件中，我有一个用于每小时预报的 for 循环，但我需要将它分成 4 行，每行 3 行，而不是包含 12 项的单行，如何每 3 次添加一个换行符？这是我的 for 循环:

for (var i = 0; i<12; i++) {
    document.getElementById("Hicon" + i).style.left = 1.4 +  8.333*i + "%";
    document.getElementById("Hpop" + i).style.left = 2.5 +  8.333*i + "%";
    document.getElementById("Hour" + i).style.left = 1.57 +  8.333*i + "%";
    document.getElementById("Htemp" + i).style.left = 1.3 +  8.333*i + "%";
}

这是我的 Hicon 的 css，其他 3 个元素的 css 几乎相同:

#Hicon0, #Hicon1, #Hicon2, #Hicon3, #Hicon4, #Hicon5, #Hicon6, #Hicon7, #Hicon8, #Hicon9, #Hicon10, #Hicon11 {
    position: absolute;
    top: 5%;
    left: 1.4%; /* set in main.js */
    width: 5.5%;
    height: 40%;
}

这是 Hicon 的 HTML，其他项目在 hourlyforecast div 中的格式相同。

    <div id="hourlyforecastContainer" class="scaleZero">
        <div id="hourlyforecast">
            <div id="hourlyforecastBG"></div>
            <img id="Hicon0" src="Icon Sets/blank.png"/>
            <img id="Hicon1" src="Icon Sets/blank.png"/>
            <img id="Hicon2" src="Icon Sets/blank.png"/>
            <img id="Hicon3" src="Icon Sets/blank.png"/>
            <img id="Hicon4" src="Icon Sets/blank.png"/>
            <img id="Hicon5" src="Icon Sets/blank.png"/>
            <img id="Hicon6" src="Icon Sets/blank.png"/>
            <img id="Hicon7" src="Icon Sets/blank.png"/>
            <img id="Hicon8" src="Icon Sets/blank.png"/>
            <img id="Hicon9" src="Icon Sets/blank.png"/>
            <img id="Hicon10" src="Icon Sets/blank.png"/>
            <img id="Hicon11" src="Icon Sets/blank.png"/>

Answer 1

您可以使用 Remainder (%) 添加条件 :

if ( i%3 == 0 )
{
   //Break here
}

当i = [0,3,6,9]时条件会达到4次.

您还可以使用 (i%3==2)根据@Tony Wu的建议，条件也将达到4次，但当i = [2,5,8,11] .

希望这对您有所帮助。