Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Jun 2nd, 2012  |  syntax: None  |  size: 3.25 KB  |  hits: 13  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Javascript group by array content
  2. <div id="A"></div>
  3. <div id="B"></div>
  4. <div id="C"></div>
  5. <div id="D"></div>
  6.        
  7. <div id="A">
  8. <div id="contentFromMyOtherArray"> this object comes from my other array and had the content category A </div>
  9. <div id="contentFromMyOtherArray"> this object also comes from my other array and had the content category A still inside the A div </div>
  10. </div>
  11. <div id="B">
  12. <div id="contentFromMyOtherArray"> this object comes from the array and had the content category B </div>
  13. </div>
  14.        
  15. var categories = ['A', 'B', 'C', 'D'];
  16. var other = [];
  17. other['A'] = ['item 1', 'item 2', 'item 3'];
  18. other['B'] = ['item 4', 'item 5'];
  19. other['C'] = ['item 6'];
  20.        
  21. $(document).ready(function() {    
  22.     $.each(categories, function(index, category) {
  23.         var categoryId = category.replace(/ /gi, '_');
  24.         var newCategory = $('<div />').attr('id', categoryId);
  25.         // you can set any other properties on this new div here using .attr()
  26.         $.each(other[category], function(index, item) {
  27.             var itemId = category + '_' + item.replace(/ /gi, '_');
  28.             var newInnerDiv = $('<div />').attr('id', itemId);
  29.             // set any other properties like text content, etc here
  30.             newInnerDiv.appendTo(newCategory);
  31.         });
  32.         newCategory.appendTo('body');
  33.     });
  34. });
  35.        
  36. <div id="containerDiv">
  37.     <div id="A"></div>
  38.     <div id="B"></div>
  39.     <div id="C"></div>
  40. </div>
  41.        
  42. var resultArray = [
  43.     ["A", "Title1", "this object comes from my other array and had the content category A"],
  44.     ["B", "Title2", "this object comes from my other array and had the content category B"],
  45.     ["C", "Title3", "this object comes from my other array and had the content category C"],
  46.     ["D", "Title4", "this object comes from my other array and had the content category D"],
  47.     ["A", "Title5", "this object comes from my other array and had the content category A"],
  48.     ["A", "Title6", "this object comes from my other array and had the content category A"],
  49.     ["C", "Title7", "this object comes from my other array and had the content category C"],
  50.     ["D", "Title8", "this object comes from my other array and had the content category D"],
  51.     ["C", "Title9", "this object comes from my other array and had the content category C"],
  52.     ["D", "Title10", "this object comes from my other array and had the content category D"],
  53.     ["A", "Title11", "this object comes from my other array and had the content category A"],
  54.     ["D", "Title12", "this object comes from my other array and had the content category D"],
  55.     ["C", "Title13", "this object comes from my other array and had the content category C"],
  56.     ["B", "Title14", "this object comes from my other array and had the content category B"]
  57. ];
  58.  
  59. $(document).ready(
  60.     function() {
  61.         var holderMap = new Array();
  62.         $("div#containerDiv").children("div").each(
  63.             function() {
  64.                 holderMap[$(this).attr("id")]=$(this);
  65.             }
  66.         );
  67.         var elem = null;
  68.         var value = null;
  69.         $(resultArray).each(function() {
  70.             elem = holderMap[$(this)[0]];
  71.             value = $(this)[2];
  72.             if(elem) {
  73.                 $(elem).html($(elem).html() + '<div id="contentFromMyOtherArray">' + value + '</div>');
  74.             }
  75.         });
  76.     }
  77. );