Hello. There is a list of links of the type <a class="linkclass" href=""><span>text</span></a> such links in the data array can be from zero to 28-30. the task is to sort them into 7 columns, i.e.

1 8 2 9 3 10 4 11 5 12 6 7 well, and so on. the only thing that came to mind was to shove them in 7 pieces in a div with the property float: left. Tell me how to do something, I found implementation options, where in the body of the ul lists there were such blocks, but not suitable. also, it is necessary that they all have one class, but the latter has an additional one (so that it is possible to center and zero the indentation of the latter).

Initially we have:

 <a class="linkclass" href="">1 text</a> <a class="linkclass" href="">2 text</a> <a class="linkclass" href="">3 text</a> <a class="linkclass" href="">4 text</a> <a class="linkclass" href="">5 text</a> <a class="linkclass" href="">6 text</a> <a class="linkclass" href="">7 text</a> <a class="linkclass" href="">8 text</a> <a class="linkclass" href="">9 text</a> <a class="linkclass" href="">10 text</a> <a class="linkclass" href="">11 text</a> <a class="linkclass" href="">12 text</a> <a class="linkclass" href="">13 text</a> <a class="linkclass" href="">14 text</a> <a class="linkclass" href="">15 text</a> <a class="linkclass" href="">16 text</a> <a class="linkclass" href="">17 text</a> <a class="linkclass" href="">18 text</a>

Below is an example of the result that I need, I indicated the numbers in the links just for clarity, in reality these category names will be.

 .column { background: #cccccc; width: 100px; float: left; margin-right: 10px; } .column-last { margin-right: 0px; } .linkclass { display: block; } 
 <div class="column"> <a class="linkclass" href="">1 text</a> <a class="linkclass" href="">2 text</a> <a class="linkclass" href="">3 text</a> <a class="linkclass" href="">4 text</a> <a class="linkclass" href="">5 text</a> <a class="linkclass" href="">6 text</a> <a class="linkclass" href="">7 text</a> </div> <div class="column"> <a class="linkclass" href="">8 text</a> <a class="linkclass" href="">9 text</a> <a class="linkclass" href="">10 text</a> <a class="linkclass" href="">11 text</a> <a class="linkclass" href="">12 text</a> <a class="linkclass" href="">13 text</a> <a class="linkclass" href="">14 text</a> </div> <div class="column column-last"> <a class="linkclass" href="">15 text</a> <a class="linkclass" href="">16 text</a> <a class="linkclass" href="">17 text</a> <a class="linkclass" href="">18 text</a> </div>

  • @ Jean-Claude, wrote from the phone and did not format, corrected + added an example of how it should look. - Aaron
  • @ Jean-Claude read again, I did not say anything about 7 columns, I said 7 links in one column (block). :) - Aaron

1 answer 1

Updated

 $(function() { var array = $('.linkclass'); var temparray, chunk = 7; for (var i = 0, j = array.length; i < j; i += chunk) { temparray = array.slice(i, i + chunk); $('.result').append('<div class="column"></div>'); $('.result div.column:last').append(temparray); } $('.result div.column:last').addClass('column-last'); }); 
 .column { background: #cccccc; width: 100px; float: left; margin-right: 10px; } .column-last { margin-right: 0px; } .linkclass { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a class="linkclass" href="">1 text</a> <a class="linkclass" href="">2 text</a> <a class="linkclass" href="">3 text</a> <a class="linkclass" href="">4 text</a> <a class="linkclass" href="">5 text</a> <a class="linkclass" href="">6 text</a> <a class="linkclass" href="">7 text</a> <a class="linkclass" href="">8 text</a> <a class="linkclass" href="">9 text</a> <a class="linkclass" href="">10 text</a> <a class="linkclass" href="">11 text</a> <a class="linkclass" href="">12 text</a> <a class="linkclass" href="">13 text</a> <a class="linkclass" href="">14 text</a> <a class="linkclass" href="">15 text</a> <a class="linkclass" href="">16 text</a> <a class="linkclass" href="">17 text</a> <a class="linkclass" href="">18 text</a> <div class="result"></div>

  • It seems you did not understand what I need, initially we have a pack of links that are not decorated in blocks, just a list of links. The script should wrap them in blocks of 7 pieces to get the result that I gave in the first message. :) - Aaron
  • @Aaron updated the answer. - Jean-Claude
  • thanks, now as it should) - Aaron