Tworzę sobie galerie do portfolio, podstawie tagów zawartych w parametrze data-tags rozbijam sobie galerie na subgalerie w których będą tylko wpisy mające konkretny tag, skrypt ładnie wypełnia mi subgalerie, ale z jakiegoś powodu czyści oryginalną (pozostawia row z pustą treścią)
http://jsfiddle.net/7AYj2/2/$(function(){
var items = $('#gallery-wrap .row>div'),
itemsByTag = {},
galleryElements = {};
items.each(function(i){
var ob = $(this),
tags = ob.data('tags').split(',');
ob.attr('data-id',i);
$.each(tags, function(key, value){
value= $.trim(value);
if(!(value in itemsByTag)) {
itemsByTag[value] = i;
galleryElements[value] = {};
}
galleryElements[value][i] = ob;
});
});
createMenu('Wszystkie','#gl', true);
var i = 0;
$.each(galleryElements,function(key, value){
var j = 0,
galleryWrap = $('<div>',{
'class' : 'gallery-wrap hidden',
'id' : 'gl'+i
}),
wrap = $('<div>',{
'class' : 'gallery',
'id' : 'gallery-wrap'+i
}),
nav = $('<div>',{
'class' : 'nav',
'id' : 'nav'+i
}),
row;
wrap.appendTo(galleryWrap);
nav.appendTo(galleryWrap);
createMenu(key,'#gl'+i, false);
$.each(value, function(key, value){
//coś z tym ifem bez niego oczywiście nie wstawi do subgalerii wpisów ale nie skasuje pierwszej
if(j%8 == 0) {
row = $('<div>',{
'class' : 'row'
});
row.appendTo(wrap);
}
value.appendTo(row);
j++;
});
galleryWrap.appendTo($('#page section'));
i++;
});
function createMenu(val, target, active) {
if(active) {
var menu = $('<span>',{
'class': 'active',
'text':val,
'data-target': target
});
} else {
var menu = $('<span>',{
'text':val,
'data-target': target
});
}
menu.appendTo('#gallery-menu');
}
});
<div class="gallery-wrap" id="gl"> <div id="gallery-wrap" class="gallery"> <div data-tags="Cięcie,jQuery"> <img src="images/p1.png" alt=""/> <div data-tags="PHP,jQuery"> <img src="images/p2.png" alt=""/> <img src="images/p2.png" alt=""/> <img src="images/p1.png" alt=""/> <div data-tags="PHP, jQuery, Cięcie"> <img src="images/p1.png" alt=""/> <div data-tags="Poprawki"> <img src="images/p1.png" alt=""/> <img src="images/p2.png" alt=""/> <div data-tags="Cięcie,PHP"> <img src="images/p1.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p2.png" alt=""/> <img src="images/p2.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p2.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p2.png" alt=""/> <img src="images/p2.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p1.png" alt=""/> <img src="images/p2.png" alt=""/> <img src="images/p1.png" alt=""/> <div id="nav" class="nav"></div>