| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > JavaScript: для новичков > Правельная html структура |
| Автор: Valeriy1996 22.6.2015, 22:32 |
| 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> А нужно, чтоб получилось: один <div class="Digital" style="float: left" hide"=""> <div class="work-wrapper"> <img> </div> </div> - тоесть див категория , и в ету категорию все согласно json структуре . |
| Автор: ksnk 23.6.2015, 00:22 | ||
| Тут есть кнопка "код". Нужно оформить куски кода правильным образом. Еще есть https://jsfiddle.net/vhj9r5nk/, там можно слепить готовый пример, сразу и попробовать. Легче будет получить ответ. И что не правильно? Структура получается такая
Это не правильно? А как тогда должно быть? |