如何正確地將一列拆分為 Javascript 中的幾列？
[英]How to correctly split an column into several columns in Javascript?
問題描述
我嘗試將一列分成幾列，我顯然正在做的是將它按行划分，或者通過指定每列“我想要”多少行，如果有人可以幫助我，我將不勝感激
在這里，我將讓您查看我的代碼：
$(function($) { var num_cols = 4, container = $('.split-list'), listItem = 'td', listClass = 'sub-list'; container.each(function() { var items_per_col = new Array(), items = $(this).find(listItem), min_items_per_col = Math.floor(items.length / num_cols), difference = items.length - (min_items_per_col * num_cols); for (var i = 0; i < num_cols; i++) { if (i < difference) { items_per_col[i] = min_items_per_col + 1; } else { items_per_col[i] = min_items_per_col; } } for (var i = 0; i < num_cols; i++) { $(this).append($('<ul></ul>').addClass(listClass)); for (var j = 0; j < items_per_col[i]; j++) { var pointer = 0; for (var k = 0; k < i; k++) { pointer += items_per_col[k]; } $(this).find('.' + listClass).last().append(items[j + pointer]); } } }); });
.split-list tr{ float: left; margin-left: 1em; }.split-list td{ padding-right: 2em; line-height: 1.5em; @include font-size(12px); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> </thead> <tbody> <tr class="split-list"> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> <td>list Item 1</td> </tr> </tbody> </table>
1 個解決方案
解決方案1
0 已采納 2019-11-08 17:29:22
我自己修復了它，如果你們有同樣的問題，我會發布解決方案。
這是我的代碼
$(function($) { var num_cols = 4, container = $('.split-list'), listItem = 'tr', listClass = 'sub-list'; container.each(function() { var items_per_col = new Array(), items = $(this).find(listItem), min_items_per_col = Math.floor(items.length / num_cols), difference = items.length - (min_items_per_col * num_cols); for (var i = 0; i < num_cols; i++) { if (i < difference) { items_per_col[i] = min_items_per_col + 1; } else { items_per_col[i] = min_items_per_col; } } for (var i = 0; i < num_cols; i++) { $(this).append($('<div class="col-3"></div>').addClass(listClass)); for (var j = 0; j < items_per_col[i]; j++) { var pointer = 0; for (var k = 0; k < i; k++) { pointer += items_per_col[k]; } $(this).find('.' + listClass).last().append(items[j + pointer]); } } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.DOCTYPE html PUBLIC "-//W3C//DTD HTML 4:01 Transitional//EN" "http.//www.w3.org/TR/html4/loose;dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html, charset=utf-8"> <title>Columnizer JQuery Plugin sample page</title> <meta name="author" content="Adam Wulf: Matt Wilson"> <:-- Date. 2008-07-12 --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap:min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https.//code.jquery.com/jquery-3.3.1.slim:min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper:min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <table> <thead></thead> <tbody class="split-list row"> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> <tr><td>Item num</td></tr> </tbody> </table> </body> </html>
如何在Javascript中為每個索引將數組拆分為多個數組
[英]How to split some array to several array for every some index in Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.