Форум

Валерий1996 · #1 (**permalink**) 22.06.2015, 22:19

function renderWorked(itemsi) {
        
  $('#cases').append('<div class="works block" >   </div>'); // создаём див в который будет добавляться информация с джсон
  
  var containered = $('.block'), html = [], i, item;  // сюда должно добавлять 
    for (i = 0; i < itemsi.length; i ++) {
	        item = itemsi[i];
         
		
		
		if($("div")){ // если етод код убрать то все загребет под одну категорию
		
		//-----собирает html добавляя данные с json  
		
        html.push('<div  class="works' + item['Category']  + '"' + 'style="float: left"'+ 'hide">'); // вставляет div с нужной категорией
        html.push('<div class="work-wrapper closed w' + item['Wraper']+'">');
        html.push('<img data-video="' + item['data-video'] + '" src="/Kvinto/img/works/preview/' + item['image-data']  +   'data-alt-src="' + item['data-alt-src'] + '.jpg title="" alt=""   >');
        html.push('<h3>'+ item['title'] + '</h3>');
		html.push('</div>');
    }
    			

    html.push('</div>');
    containered.html(html.join(''));
	// html.push('<div class="clearfix"></div>');
		}

}


var workItemsed = [  //json файл

// kategori_1
{'Wraper': '1','Category': 'Digital','data-video': '5n_aW-dPRIQ0', 'data-alt-src':'5n_aW-dPRIQ0', 'image-data': '5n_aW-PdRIQ0.jpg"', 'title': 'Digital <br>  (пример1)' },

// kategori_2
{'Wraper': '2','Category': 'iron75','data-video': 'r3-K4vdvRe6E', 'data-alt-src':'r3-K4dvvRe6E', 'image-data': 'r3-K4vvdRe6E.jpg"', 'title': 'Digital <br> rill)' },

// Kategori_3
{'Wraper': '1','Category': 'tod123','data-video': 'np_IEdf2dz0I', 'data-alt-src':'np_IEddf2z0I', 'image-data': 'np_IEdfd2z0I.jpg"', 'title': 'Digital <br> Screen ' },

// Kategori_4
{'Wraper': '2','Category': 'CinemaSity','data-video': 'IEv-n8d1jXj4', 'data-alt-src':'IEv-n8d1jXj4', 'image-data': 'IEv-n81djXj4.jpg"', 'title': 'Digital <br> s23' },

// Kategori_5
{'Wraper': '2','Category': 'GEt1323','data-video': 'qMyvvsdI-Ct8', 'data-alt-src':'qMyvvsI-Cdt8', 'image-data': 'qMyvdvsI-Ct8.jpg"', 'title': 'Digital <br> ' },

// kategori_6
{'Wraper': '2','Category': 'Center','data-video': 'wSszoG2dJMTM', 'data-alt-src':'wSszoG2dJMTM', 'image-data': 'wSszoG2JMdTM.jpg"', 'title': 'Digital <br> Digital' },

 
renderWorked(workItemsed);

Получаеться такая разметка :

<div class="Digital" style="float: left" hide"="">  </div>
<div class="Digital" style="float: left" hide"="">  </div>
<div class="Digital" style="float: left" hide"=""> </div>
<div class="Digital" style="float: left" hide"=""> </div>


[/htm]

А нужно, чтоб получилось: 

один 

 [html]  <div class="Digital" style="float: left" hide"=""> <div class="work-wrapper">  <img>    </div>  </div>

тоесть див категория , и в ету категорию все согласно json структуре .
:

рони · #2 (**permalink**) 22.06.2015, 22:39

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 22.06.2015, 23:28

Валерий1996,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function() {
       function renderWorked(arr) {
           arr = $.map(arr, function(item) {
               var div = $("<div/>", {
                       "class": "works" + item["Category"]
                   }),
                   img = $("<img/>", {
                       src: "/Kvinto/img/works/preview/" + item["image-data"],
                       attr: {
                           "data-video": item["data-video"],
                           "data-alt-src": item["data-alt-src"]
                       }

                   }),
                   h3 = $("<h3/>", {
                       html: item["title"]
                   });
               div.append($("<div/>", {
                   html: [img, h3],
                   "class": "work-wrapper"
               }));
               return div
           })
           $('#cases').append($("<div/>", {
               html: arr,
               "class": "works block"
           }))

       }
       var arr = [{
               'Wraper': '1',
               'Category': 'Digital',
               'data-video': '5n_aW-dPRIQ0',
               'data-alt-src': '5n_aW-dPRIQ0',
               'image-data': '5n_aW-PdRIQ0.jpg"',
               'title': 'Digital <br> (пример1)'
           }, {
               'Wraper': '2',
               'Category': 'iron75',
               'data-video': 'r3-K4vdvRe6E',
               'data-alt-src': 'r3-K4dvvRe6E',
               'image-data': 'r3-K4vvdRe6E.jpg"',
               'title': 'Digital <br> rill)'
           },

       ]

       renderWorked(arr);


   });
  </script>
</head>

<body>


<div id='cases'></div>




</body>

</html>

Валерий1996 · #4 (**permalink**) 02.07.2015, 09:01

Спасибо. А как сделать , если например у меня будет несколькоко wraper 1, или wraper 2 , чтоб для них постоянно не создавать новый див категории , а что б они записывались в тот же див категории к которой они принадлежат? (при етом несоздавая постоянно новый див категории)

рони · #5 (**permalink**) 02.07.2015, 09:28

Валерий1996,
добавлена проверка если див с категорией существует использовать его а не новый. строка 35.

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .works.block > div{
       border: #FF3300 5px solid;
       margin: 7px;
   }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function() {
       function renderWorked(arr) {
           var Category = {};
           arr = $.map(arr, function(item) {
               var div = $("<div/>", {
                       "class": "works" + item["Category"]
                   }),
                   img = $("<img/>", {
                       src: "/Kvinto/img/works/preview/" + item["image-data"],
                       attr: {
                           "data-video": item["data-video"],
                           "data-alt-src": item["data-alt-src"]
                       }

                   }),
                   h3 = $("<h3/>", {
                       html: item["title"]
                   });
               Category[item["Category"]] ? (div = Category[item["Category"]]) : (Category[item["Category"]] = div);
               div.append($("<div/>", {
                   html: [img, h3],
                   "class": "work-wrapper"
               }));
               return div
           })
           $('#cases').append($("<div/>", {
               html: arr,
               "class": "works block"
           }))

       }
       var arr = [{
               'Wraper': '2',
               'Category': 'iron75',
               'data-video': 'r3-K4vdvRe6E',
               'data-alt-src': 'r3-K4dvvRe6E',
               'image-data': 'r3-K4vvdRe6E.jpg"',
               'title': 'iron75 <br> (пример2)'
           },{
               'Wraper': '1',
               'Category': 'Digital',
               'data-video': '5n_aW-dPRIQ0',
               'data-alt-src': '5n_aW-dPRIQ0',
               'image-data': '5n_aW-PdRIQ0.jpg"',
               'title': 'Digital <br> (пример1)'
           },{
               'Wraper': '1',
               'Category': 'Digital',
               'data-video': '5n_aW-dPRIQ0',
               'data-alt-src': '5n_aW-dPRIQ0',
               'image-data': '5n_aW-PdRIQ0.jpg"',
               'title': 'Digital <br> (пример1)'
           }, {
               'Wraper': '2',
               'Category': 'iron75',
               'data-video': 'r3-K4vdvRe6E',
               'data-alt-src': 'r3-K4dvvRe6E',
               'image-data': 'r3-K4vvdRe6E.jpg"',
               'title': 'iron75 <br> (пример2)'
           }

       ]

       renderWorked(arr);


   });
  </script>
</head>

<body>


<div id='cases'></div>




</body>

</html>

Валерий1996 · #6 (**permalink**) 02.07.2015, 09:45

Спасибо

Форум

Справочник

Discord чат

Курсы javascript