Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Правельная html структура, При сборе html из json Допустил ошибку п 
:(
    Опции темы
Valeriy1996
Дата 22.6.2015, 22:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 12.6.2015

Репутация: нет
Всего: нет



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 структуре .

PM MAIL   Вверх
ksnk
Дата 23.6.2015, 00:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Тут есть кнопка "код". Нужно оформить куски кода правильным образом. 

Еще есть jsfiddle, там можно слепить готовый пример, сразу и попробовать. Легче будет получить ответ.

И что не правильно?

Структура получается такая 
Код

<div id="cases">
<div class="works block">
   <div class="worksDigital" style="float: left" hide"=""><div class="work-wrapper closed w1">
      <img data-video="5n_aW-dPRIQ0" src="/Kvinto/img/works/preview/5n_aW-PdRIQ0.jpg" 
               data-alt-src="5n_aW-dPRIQ0.jpg title=" "="" alt="">
      <h3>Digital <br>  (пример1)</h3>
   </div></div>
...

</div></div>

Это не правильно? А как тогда должно быть?

Это сообщение отредактировал(а) ksnk - 23.6.2015, 00:23


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




[ Время генерации скрипта: 0.0621 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.