javascript - 添加新的 div 直到计数到 9 或 6 或 3

Question

我需要有 9 个具有 foo 类或 6 或 3 类的 div
它只需要是这三个数字

示例：
如果页面上具有类 foo 的元素是 4
添加具有类 foo 的新 div 标签，直到它们计数为 6
如果它们2 数到 3，如果他们 7 数到 9

这是我在 jsfiddle 上的代码

http://jsfiddle.net/H6bky/

这是html

<div id="content">
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
  <div class="foo">foo</div>
</div>

这是css代码

#content{
width: 510px;  
background: #ccc;
height: 800px;
}

.foo{
width: 150px;
height: 100px;
background: #808080;
margin: 10px;
float: left;
}

谢谢

Answer 1

http://jsfiddle.net/H6bky/1/

$(document).ready(function(){
onePostlength = $(".foo").length;
if (onePostlength < 9 && onePostlength % 3 !=0)
{
    while ($(".foo").length % 3 != 0)
    {
      $("#content").append('<div class="foo" />');  
    }
}
});

Answer 2

使用模运算符

var current = $("div.foo").length;
while((current % 3) != 0) {     // 3 can be any other number
    $("#content").append("<div class='foo'>foo</div>");
    current++;
}

Answer 3

var n = 3 - (document.querySelectorAll('.foo').length % 3),
content = document.getElementById('content'),
div, i;

for (i=0; n<3 && i<n; i++) {
    div = document.createElement('div');
    div.className = 'foo';
    div.appendChild(document.createTextNode('foo'));

    content.appendChild(div);
}

查找元素的长度.foo，如果不是三的倍数，则插入更多的 div。