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/
[JAVASCRIPT] pobierz, plaintext 
  1. $(function(){
  2.     var items = $('#gallery-wrap .row>div'),
  3.         itemsByTag = {},
  4.         galleryElements = {};
  5.  
  6.     items.each(function(i){
  7.         var ob = $(this),
  8.             tags = ob.data('tags').split(',');
  9.  
  10.         ob.attr('data-id',i);
  11.  
  12.         $.each(tags, function(key, value){
  13.             value= $.trim(value);
  14.             if(!(value in itemsByTag)) {
  15.                 itemsByTag[value] = i;
  16.                 galleryElements[value] = {};
  17.             }
  18.             galleryElements[value][i] = ob;
  19.  
  20.         });
  21.     });
  22.     createMenu('Wszystkie','#gl', true);
  23.     var i = 0;
  24.     $.each(galleryElements,function(key, value){
  25.         var j = 0,
  26.         galleryWrap = $('<div>',{
  27.             'class' : 'gallery-wrap hidden',
  28.             'id'    : 'gl'+i
  29.         }),
  30.         wrap = $('<div>',{
  31.             'class' : 'gallery',
  32.             'id'    : 'gallery-wrap'+i
  33.         }),
  34.         nav = $('<div>',{
  35.             'class' : 'nav',
  36.             'id'    : 'nav'+i
  37.         }),
  38.         row;
  39.  
  40.         wrap.appendTo(galleryWrap);
  41.         nav.appendTo(galleryWrap);
  42.         createMenu(key,'#gl'+i, false);
  43.         $.each(value, function(key, value){
  44. //coś z tym ifem bez niego oczywiście nie wstawi do subgalerii wpisów ale nie skasuje pierwszej
  45.             if(j%8 == 0) {
  46.                 row = $('<div>',{
  47.                     'class' : 'row'
  48.                 });
  49.                 row.appendTo(wrap);
  50.             }
  51.             value.appendTo(row);
  52.             j++;
  53.         });
  54.         galleryWrap.appendTo($('#page section'));
  55.         i++;
  56.     });
  57.     function createMenu(val, target, active) {
  58.         if(active) {
  59.             var menu = $('<span>',{
  60.                 'class': 'active',
  61.                 'text':val,
  62.                 'data-target': target
  63.             });
  64.         } else {
  65.             var menu = $('<span>',{
  66.                 'text':val,
  67.                 'data-target': target
  68.             });
  69.         }
  70.         menu.appendTo('#gallery-menu');
  71.     }
  72.  
  73. });
[JAVASCRIPT] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div class="gallery-wrap" id="gl">
  2.                     <div id="gallery-wrap" class="gallery">
  3.                         <div class="row">
  4.                             <div data-tags="Cięcie,jQuery">
  5.                                 <div class="new"></div>
  6.                                 <img src="images/p1.png" alt=""/>
  7.                             </div>
  8.                             <div data-tags="PHP,jQuery">
  9.                                 <img src="images/p2.png" alt=""/>
  10.                             </div>
  11.                             <div data-tags="PHP">
  12.                                 <img src="images/p2.png" alt=""/>
  13.                             </div>
  14.                             <div data-tags="Cięcie">
  15.                                 <img src="images/p1.png" alt=""/>
  16.                             </div>
  17.                             <div data-tags="PHP, jQuery, Cięcie">
  18.                                 <img src="images/p1.png" alt=""/>
  19.                             </div>
  20.                             <div data-tags="Poprawki">
  21.                                 <img src="images/p1.png" alt=""/>
  22.                             </div>
  23.                             <div data-tags="Cięcie">
  24.                                 <img src="images/p2.png" alt=""/>
  25.                             </div>
  26.                             <div data-tags="Cięcie,PHP">
  27.                                 <img src="images/p1.png" alt=""/>
  28.                             </div>
  29.                         </div>
  30.                         <div class="row">
  31.                             <div data-tags="PHP">
  32.                                 <div class="new"></div>
  33.                                 <img src="images/p1.png" alt=""/>
  34.                             </div>
  35.                             <div data-tags="PHP">
  36.                                 <img src="images/p2.png" alt=""/>
  37.                             </div>
  38.                             <div data-tags="PHP">
  39.                                 <img src="images/p2.png" alt=""/>
  40.                             </div>
  41.                             <div data-tags="PHP">
  42.                                 <img src="images/p1.png" alt=""/>
  43.                             </div>
  44.                             <div data-tags="PHP">
  45.                                 <img src="images/p1.png" alt=""/>
  46.                             </div>
  47.                             <div data-tags="PHP">
  48.                                 <img src="images/p1.png" alt=""/>
  49.                             </div>
  50.                             <div data-tags="PHP">
  51.                                 <img src="images/p2.png" alt=""/>
  52.                             </div>
  53.                             <div data-tags="PHP">
  54.                                 <img src="images/p1.png" alt=""/>
  55.                             </div>
  56.                         </div>
  57.                         <div class="row">
  58.                             <div data-tags="PHP">
  59.                                 <div class="new"></div>
  60.                                 <img src="images/p1.png" alt=""/>
  61.                             </div>
  62.                             <div data-tags="PHP">
  63.                                 <img src="images/p2.png" alt=""/>
  64.                             </div>
  65.                             <div data-tags="PHP">
  66.                                 <img src="images/p2.png" alt=""/>
  67.                             </div>
  68.                             <div data-tags="PHP">
  69.                                 <img src="images/p1.png" alt=""/>
  70.                             </div>
  71.                             <div data-tags="PHP">
  72.                                 <img src="images/p1.png" alt=""/>
  73.                             </div>
  74.                             <div data-tags="PHP">
  75.                                 <img src="images/p1.png" alt=""/>
  76.                             </div>
  77.                             <div data-tags="PHP">
  78.                                 <img src="images/p2.png" alt=""/>
  79.                             </div>
  80.                             <div data-tags="PHP">
  81.                                 <img src="images/p1.png" alt=""/>
  82.                             </div>
  83.                         </div>
  84.                     </div>
  85.                     <div id="nav" class="nav"></div>
  86.                 </div>
[HTML] pobierz, plaintext