Dynamically create LI items from DIV classes with jQuery
Dynamically create LI items from DIV classes with jQuery
HTML
<ul id="filters" class="option-set clearfix" data-option-key="filter">
<li><a href="#filter" data-option-value="*" class="selected">Show all</a></li>
</ul>
<div class="project-item Video">
<p>
Test
</p>
</div>
<div class="project-item Photography">
<p>
Test
</p>
</div>
<div class="project-item Video Photography">
<p>
Test
</p>
</div>
JavaScript
$(document).ready(function () {
$('.project-item').each(function () {
var obj = $(this);
$.each(obj.attr('class').split(' '), function (i, value) {
if (value !== 'project-item' && $('#filters').find('[data-option-value="' + value + '"]').length === 0) {
$('ul#filters').append($('<li />').append($('<a />', { 'href': '#filter', 'data-option-value': value }).text(value)));
}
});
});
});