Разбивка набора элементов div из таблицы по 4 штуки и объединение их в td по 4 штуки
 

Добрый день, есть задачка, нужно объединить список элементов в блоки по 4 штуки, но начинать это с 9 элемента и потом уже с конца этого 9 элемента оборачивать остальные элементы после 9, оборачивая их в див по 4 штуки.

Вот код:

<table>
  <tr id="item_1">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_2">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_3">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_4">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_5">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_6">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_7">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_8">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_9">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_10">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_11">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_12">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_13">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_14">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_15">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_16">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_17">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_18">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_19">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_20">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_21">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_22">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_23">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_24">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_25">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_26">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_27">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_28">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_29">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_30">
    <td>
      <div></div>
    </td>
  </tr>
</table>

А нужно получить в итоге такой вид:

<table>
  <tr id="item_1">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_2">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_3">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_4">
    <td>
      <div id="30"></div>
    </td>
  </tr>
  <tr id="item_5">
    <td>
      <div id="item_26"></div>
      <div id="item_27"></div>
      <div id="item_28"></div>
      <div id="item_29"></div>
    </td>
  </tr>
  <tr id="item_6">
    <td>
      <div id="item_22"></div>
      <div id="item_23"></div>
      <div id="item_24"></div>
      <div id="item_25"></div>
    </td>
  </tr>
  <tr id="item_7">
    <td>
      <div id="item_18"></div>
      <div id="item_19"></div>
      <div id="item_20"></div>
      <div id="item_21"></div>
    </td>
  </tr>
  <tr id="item_8">
    <td>
      <div id="item_14"></div>
      <div id="item_15"></div>
      <div id="item_16"></div>
      <div id="item_17"></div>
    </td>
  </tr>
  <tr id="item_9">
    <td>
      <div id="item_10"></div>
      <div id="item_11"></div>
      <div id="item_12"></div>
      <div id="item_13"></div>
    </td>
  </tr>
</table>

id вставлять не обязательно, главное чтобы 4 div'а брал и добавлял в td начиная с конца #item_9

Не проще ли получить коллекцию DIV и построить нужную таблицу?

проще, но мне именно нужна таблица и такая структура. Т.к. каждый div я буду ротировать определенное время и переворачивать их с помощью css3

У меня влазит 9 td на одном экране, нужно создать ротацию, если их больше 9

А я что-то иное предлагаю? Получили все div в таблице querySelectorAll(selector). А далее первый срез до нужной ячейки с выводом как есть, а второй срез от этой ячейки по конечную, который развернули, а затем в цикле брать по четыре, разворачивать и выводить - формировать TR, TD, помещая в них. То есть строим новую таблицу, удаляя источник.

Странная, однако, задача. )

PS. Что за источник этих данных/таблицы, над которой нужно так издеваться, нельзя ли изначально получать данные в потребном виде?

kiberkun,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div {
      width: 170px;
      height: 18px;
      background-color: hsl(300, 100%, 27%);
      margin: 5px;
  }
  div:after {
      counter-increment: z ;
      content: counter(z);
      color: hsl(30, 67%, 94%);
      display: block;
      text-align: center;
  }
  body {
      counter-reset: z 0;
  }

  td {
      border: 1px solid hsl(195, 100%, 50%);
      background-color: hsl(150, 100%, 50%);

  }
  table {
      counter-reset: num 0;
      border-spacing: 7px 11px;
  }
  tr:before {
      counter-increment: num ;
      content: counter(num);
      color: hsl(25, 76%, 31%);
  }
  tr{

  }

  </style>

  <script>
    document.addEventListener("DOMContentLoaded", function(){
       [...document.querySelectorAll("tr")].reduceRight((accumulator, tr) =>{
       if(document.querySelectorAll("tr").length == 9) return accumulator;
       if(accumulator.querySelectorAll("div").length == 4) accumulator = tr;
       else {accumulator.querySelector("td").append(tr.querySelector("div")); tr.remove()}
       return accumulator
    })
 })
  </script>
</head>

<body>
<table>
  <tr id="item_1">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_2">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_3">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_4">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_5">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_6">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_7">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_8">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_9">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_10">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_11">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_12">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_13">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_14">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_15">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_16">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_17">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_18">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_19">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_20">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_21">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_22">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_23">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_24">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_25">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_26">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_27">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_28">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_29">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_30">
    <td>
      <div></div>
    </td>
  </tr>
</table>

</body>
</html>

а можно вариант на jquery ?

в чём проблема, зачем нужно jquery? берите код и используйте

kiberkun,
:(

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div {
      width: 170px;
      height: 18px;
      background-color: hsl(300, 100%, 27%);
      margin: 5px;
  }
  div:after {
      counter-increment: z ;
      content: counter(z);
      color: hsl(30, 67%, 94%);
      display: block;
      text-align: center;
  }
  body {
      counter-reset: z 0;
  }

  td {
      border: 1px solid hsl(195, 100%, 50%);
      background-color: hsl(150, 100%, 50%);

  }
  table {
      counter-reset: num 0;
      border-spacing: 7px 11px;
  }
  tr:before {
      counter-increment: num ;
      content: counter(num);
      color: hsl(25, 76%, 31%);
  }
  tr{

  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
    $(function() {
       $("tr").get().reduceRight(function(accumulator, tr){
       if($("tr").length == 9) return accumulator;
       if($("td > div", accumulator).length == 4) accumulator = tr;
       else {$("td", accumulator).prepend($("div", tr)); $(tr).remove()}
       return accumulator
    })
  });
 </script>
</head>

<body>
<table>
  <tr id="item_1">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_2">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_3">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_4">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_5">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_6">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_7">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_8">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_9">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_10">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_11">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_12">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_13">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_14">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_15">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_16">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_17">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_18">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_19">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_20">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_21">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_22">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_23">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_24">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_25">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_26">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_27">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_28">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_29">
    <td>
      <div></div>
    </td>
  </tr>
  <tr id="item_30">
    <td>
      <div></div>
    </td>
  </tr>
</table>

</body>
</html>

не поддерживается .reduceRight(), может через .each() попробовать?

kiberkun,

$(function() {
       var trs = $($("tr").get().reverse()), accumulator;
       trs.each(function(i, tr){
       if($("tr").length == 9) return;
       if($("td > div", accumulator).length == 4||!accumulator) accumulator = tr;
       else {$("td", accumulator).prepend($("div", tr)); $(tr).remove()}
    })
  });