I'm trying to create an array and have it loop through the array and append it to a div.
HTML/PHP:
<ul id="menu" class="menu">
<li id="menu-item-1">
<a href="#">
</a>
</li>
<li id="menu-item-2">
<a href="#">
</a>
</li>
<li id="menu-item-3">
<a href="#">
</a>
</li>
</ul>
JS
$(document).ready(function(){
$('a').append("
<div class='CLASS_NAME_HERE'>
<span class='vertical-align-middle'></span>
<img src='IMG_HERE'>
</div>
<div class='filter-label'>LABEL_HERE</div>");
});}
JS ARRAY
var arrayTest= [
{className: "class-01", urlSrc: "www.url01.com", labelName: "01 Label Name"},
{className: "class-02", urlSrc: "www.url02.com", labelName: "02 Label Name"},
{className: "class-03", urlSrc: "www.url03.com", labelName: "03 Label Name"},
]
Basically, it would loop through the array and append each one to look like this:
<li id="menu-item-1">
<a href="#">
<div class='class-01'>
<span class='vertical-align-middle'></span>
<img src='www.url01.com'>
</div>
<div class='filter-label'>01 Label Name</div>");
</a>
</li>
I haven't been able to work out the loop properly. Any help would be appreciated.