За последние 24 часа нас посетили 10044 программиста и 446 роботов. Сейчас ищут 103 программиста ...

Перенос дивов

Тема в разделе "JavaScript и AJAX", создана пользователем winsok, 6 дек 2017.

  1. winsok

    winsok Новичок

    С нами с:
    13 сен 2016
    Сообщения:
    34
    Симпатии:
    1
    Здравствуйте. Не знаю как сделать, что каждые три ex заворачивало в div.string, как на примере ниже.
    Вот есть такой код:
    per всегда равен корню из files, и является всегда целым числом
    Код (Javascript):
    1. var files = 9, per = 3;
    2. for (li = 0; li < files;li++) {
    3.    ax = $("#filelist #pl-"+(li+1)).attr("style");
    4.    ex += '<div class="panel" style="width:'+width+'px;height:'+height+'px;display:inline-block;'+ax+'background-position:center;background-repeat:no-repeat;background-size:cover;position:inherit;margin:8px;"></div>';
    5. }
    Нужно получить такой вид:
    HTML:
    1. <div class="string">
    2.    <div class="ex1"></div><div class="ex2"></div><div class="ex3"></div>
    3. </div>
    4. <div class="string">
    5.    <div class="ex4"></div><div class="ex5"></div><div class="ex6"></div>
    6. </div>
    7. <div class="string">
    8.    <div class="ex7"></div><div class="ex8"></div><div class="ex9"></div>
    9. </div>
    Хэлп ми
     
  2. TeslaFeo

    TeslaFeo Активный пользователь

    С нами с:
    9 мар 2016
    Сообщения:
    1.875
    Симпатии:
    455
    входной код выложи
     
  3. winsok

    winsok Новичок

    С нами с:
    13 сен 2016
    Сообщения:
    34
    Симпатии:
    1
    это какой именно?)
    files = число 9, 16, 25, 36 и так далее
    Код (Javascript):
    1. function g(files) {
    2.    var per = Math.sqrt(files);
    3.    var width = 0, height = 0;
    4.    for (li = 0; li < files;li++) {
    5.       ax = $("#filelist #pl-"+(li+1)).attr("style");
    6.       ex += '<div class="panel" style="width:'+width+'px;height:'+height+'px;display:inline-block;'+ax+'background-position:center;background-repeat:no-repeat;background-size:cover;position:inherit;margin:8px;"></div>';  
    7.    }
    8.    return ex;
    9. }
     
  4. TeslaFeo

    TeslaFeo Активный пользователь

    С нами с:
    9 мар 2016
    Сообщения:
    1.875
    Симпатии:
    455
  5. winsok

    winsok Новичок

    С нами с:
    13 сен 2016
    Сообщения:
    34
    Симпатии:
    1
    HTML:
    1. <a onclick="g(25);">click</a>
    2.  
    3. <div id="files"></div>
    в функции вместо return ex, теперь $('#files').html(ex);

    функция должно делать чтото вроде таблицы из дивов
     
  6. TeslaFeo

    TeslaFeo Активный пользователь

    С нами с:
    9 мар 2016
    Сообщения:
    1.875
    Симпатии:
    455
    Код (Javascript):
    1. var
    2. i, k,
    3. html = '', rowsCount = 3, colsCount = 3;
    4. for( i=1; i <= rowsCount; i++ ){
    5. html += '<div class="string">';
    6.   for( k = 1 k <= colsCount; k++ ){
    7.     html += '<div class="ex"></div>';
    8.   }
    9. html += '</div>';
    10. }
     
    winsok нравится это.
  7. winsok

    winsok Новичок

    С нами с:
    13 сен 2016
    Сообщения:
    34
    Симпатии:
    1
    А как сделать чтоб каждому div class="ex" присваивался id от 1 до files?
     
  8. MouseZver

    MouseZver Старожил

    С нами с:
    1 апр 2013
    Сообщения:
    3.578
    Симпатии:
    554
    Адрес:
    Лень
    Код (Javascript):
    1. html += '<div id="' + k + '" class="ex"></div>';
     
    #8 MouseZver, 6 дек 2017
    Последнее редактирование модератором: 9 дек 2017 в 15:38
  9. winsok

    winsok Новичок

    С нами с:
    13 сен 2016
    Сообщения:
    34
    Симпатии:
    1
    так у k максимальное значение равно переменной per) а мне нужно чтоб до files
     
  10. winsok

    winsok Новичок

    С нами с:
    13 сен 2016
    Сообщения:
    34
    Симпатии:
    1
    вопрос решен, спасибо за помощь
     
    denis01 нравится это.