Question

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

我想我在将项目放在第一列时需要使用for循环来计算该数字，当该循环结束时，我必须为每个列执行此操作。循环将嵌套...外部循环会说像开始一个新行，内部循环插入正确数量的项目......这有意义吗？我觉得它确实如此，但问题是我不知道该怎么做。我是一个jQuery noob，更不用说网络编程了。

非常感谢任何帮助或建议！拜托，谢谢！

我的代码：

HTML：

<div class="btn-group">
<button id="division-select" class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target=".nav-collapse">Categories<span class="caret"></span></button>
<ul id="filterOptions" class="dropdown-menu">
    <li id="get_cats"><a href="#" class="cats">Cats</a></li>
    <li id="get_dogs"><a href="#" class="dogs">Dogs</a></li>
    <li id="get_birds"><a href="#" class="birds">Birds</a></li>
    <li id="get_all"><a href="#" class="everything">Everything</a></li>
   </ul>
</div> <!-- .btn-group -->  

<div class="row">
    <div class="col-md-4 text-center">
        <a id="cats"></a>
        <a id="dogs"></a>
        <a id="birds"></a>  
        <a id="everything"></a>
    </div>
</div>

JavaScript的：

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; 
}

How I want it to look

JSFiddle

Answer 1

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

如果是，那么你可以通过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>

代替使用UL＆gt; LI，为LI提供33％的宽度并且浮动：left;

希望这能解决你的问题。您也可以在.thumnail类上使用CSS。

注意：您的小提琴链接不提供任何输出。

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

使用此链接：http://jsfiddle.net/pragneshkaria/BZ63R/4/

如何将项目迭代为3行的行

1 个答案: