Click on the provided JSFiddle link to view a dropdown menu that filters items into categories. Each item is stored as an object in an array for its respective category. Currently, all items are displayed in one column and I want to divide them into three columns by counting how many items will be displayed for each category.
To accomplish this, I plan on using a for loop to count up to the specified number of items for each category and then distribute them among the columns. The loops will be nested, with the outer loop initiating a new row and the inner loop inserting the correct number of items in each row/column. It may sound a bit complex, but I believe it's doable even though I'm relatively new to jQuery and web programming.
If you have any tips or guidance on how to achieve this task, I would greatly appreciate it! Thank you in advance!
Here is a snippet of my code:
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;
}