Javascript 如何将项目迭代到由3列划分的行中

正如您将在本文末尾的我的JSFIDLE链接中看到的，我有一个下拉菜单，可以将项目过滤到类别中。我将每个项目作为对象存储在每个类别的数组中。到目前为止，所有内容都显示在一列中。我希望能够计算出每个类别将显示多少项，然后除以3，以得到每个列中将显示多少项

我想我需要使用for循环来计算这个数字，同时将项目放入第一列，当循环结束时，我必须对每一列进行计算。循环将被嵌套。。。外部循环会说类似于开始新行的内容，而内部循环会插入正确数量的项。。。这有意义吗？我觉得是的，但问题是我不知道怎么做。我是jquerynoob，更不用说网络编程了

任何帮助或建议都将不胜感激！请，谢谢

我的代码：

HTML:

类别






是否要在三列而不是一列中显示子类别

如果是，那么您可以简单地通过CSS来完成，而不需要java脚本

<a id="everything"><div class="text-center"><a class="thumbnail"><h3>bengal</h3></a><a class="thumbnail"><h3>savannah</h3></a><a class="thumbnail"><h3>ragdoll</h3></a><a class="thumbnail"><h3>munchkin</h3></a><a class="thumbnail"><h3>siamese</h3></a><a class="thumbnail"><h3>german shepherd</h3></a><a class="thumbnail"><h3>jack russell terrier</h3></a><a class="thumbnail"><h3>parrot</h3></a></div></a>

使用此链接：
我希望能够计算每个类别将显示的项目数，然后将其除以3，以获得每个列中的项目数。希望这能回答你的问题。哇，我很惊讶。我真的认为实现这一点的唯一方法是使用javascript。非常感谢，我唯一的问题是，我如何让所有的物品在每个方向上以相等的距离浮动？很抱歉，我不知道如何解释这一点，但请查看您建议的css的外观-->注意，最下面的一行没有正好位于第二行的下方？另外，感谢您让我了解混乱的链接，我想我忘了更新它。我只是用正确的链接编辑了它。你能不能画一张粗略的图片并上传那张图片，让我们看看你到底想要什么？当然，我只是通过添加一张图片来编辑我的文章。注意每行之间的空间是如何相同的？如果可能的话，这就是我需要它的样子。非常感谢。
var data={
    "cats":[
        {"breed":"bengal"},
        {"breed":"savannah"},
        {"breed":"ragdoll"},
        {"breed":"munchkin"},
        {"breed":"siamese"}
    ],
    "dogs":[
        {"breed":"german shepherd"},
        {"breed":"jack russell terrier"}
    ],
    "birds":[
        {"breed":"parrot"}
    ],
    "everything":[
        {"breed":"bengal"},
        {"breed":"savannah"},
        {"breed":"ragdoll"},
        {"breed":"munchkin"},
        {"breed":"siamese"},
        {"breed":"german shepherd"},
        {"breed":"jack russell terrier"},
        {"breed":"parrot"}
    ]
}

$( document ).ready(function() {
    everything();
});

$(document).ready(function () {
    $("#get_cats").click(
        function () {
            cats();
        }   
    );   
});

$(document).ready(function () {
    $("#get_dogs").click(
        function () {
            dogs();
        }  
    );   
});

$(document).ready(function () {
    $("#get_birds").click(
        function () {
            birds();
        }   
    );   
});

$(document).ready(function () {
    $("#get_all").click(
        function () {
            everything();
        }  
    );   
});

function cats() {
    document.getElementById("dogs").innerHTML="";
    document.getElementById("birds").innerHTML="";
    document.getElementById("everything").innerHTML=""; 
    var output="<div class='text-center'>";
    for (var i in data.cats) {
        output += "<a class='thumbnail'><h3>"+ data.cats[i].breed +"</h3></a>";
    }
    output+="</div>";
    document.getElementById("cats").innerHTML=output; 
}

function dogs() {
    document.getElementById("cats").innerHTML="";
    document.getElementById("birds").innerHTML="";
    document.getElementById("everything").innerHTML=""; 
    var output="<div class='text-center'>";
    for (var i in data.dogs) {
        output += "<a class='thumbnail'><h3>"+ data.dogs[i].breed +"</h3></a>";
    }
    output+="</div>";
    document.getElementById("dogs").innerHTML=output; 
}

function birds() {
    document.getElementById("dogs").innerHTML="";
    document.getElementById("cats").innerHTML="";
    document.getElementById("everything").innerHTML=""; 
    var output="<div class='text-center'>";
    for (var i in data.birds) {
        output += "<a class='thumbnail'><h3>"+ data.birds[i].breed +"</h3></a>";
    }
    output+="</div>";
    document.getElementById("birds").innerHTML=output; 
}

function everything() {
    document.getElementById("dogs").innerHTML="";
    document.getElementById("birds").innerHTML="";
    document.getElementById("cats").innerHTML="";   
    var output="<div class='text-center'>";
    for (var i in data.everything) {
        output += "<a class='thumbnail'><h3>"+ data.everything[i].breed +"</h3></a>";
    }
    output+="</div>";
    document.getElementById("everything").innerHTML=output; 
}

<a id="everything"><div class="text-center"><a class="thumbnail"><h3>bengal</h3></a><a class="thumbnail"><h3>savannah</h3></a><a class="thumbnail"><h3>ragdoll</h3></a><a class="thumbnail"><h3>munchkin</h3></a><a class="thumbnail"><h3>siamese</h3></a><a class="thumbnail"><h3>german shepherd</h3></a><a class="thumbnail"><h3>jack russell terrier</h3></a><a class="thumbnail"><h3>parrot</h3></a></div></a>

.thumbnail {
    width:30%;
    float:left;
    margin:4px;
}
.thumbnail h3 {
    min-height:80px;
}