使用模数按字母顺序对列表进行排序
我没有任何困难获取元素列表并按字母顺序对它们进行排序,但是我很难理解如何使用模数进行排序。使用模数按字母顺序对列表进行排序
### UPDATE ###
这里是工作的“我的路”的代码,但是,我想下面更提供了答案的重用性,所以已经接受了答案。
<script type="text/javascript">
$(document).ready(function() {
$('.sectionList2').each(function() {
var oldList = $('li a', this),
columns = 4,
newList = [];
for(var start = 0; start < columns; start++){
for(var i = start; i < oldList.length; i += columns){
newList.push('<li><a href="' + oldList[i].href + '">' + $(oldList[i]).text() + '</a></li>');
}
}
$(this).html(newList.join(''));
});
});
</script>
例如,说我有以下无序列表:
<ul>
<li><a href="~">Boots</a></li>
<li><a href="~">Eyewear</a></li>
<li><a href="~">Gloves</a></li>
<li><a href="~">Heated Gear</a></li>
<li><a href="~">Helmet Accessories</a></li>
<li><a href="~">Helmets</a></li>
<li><a href="~">Jackets</a></li>
<li><a href="~">Mechanic's Wear</a></li>
<li><a href="~">Pants</a></li>
<li><a href="~">Protection</a></li>
<li><a href="~">Rainwear</a></li>
<li><a href="~">Random Apparel</a></li>
<li><a href="~">Riding Suits</a></li>
<li><a href="~">Riding Underwear</a></li>
<li><a href="~">Socks</a></li>
<li><a href="~">Vests</a></li>
</ul>
我有这个列表设置为显示在每列4浮动权利的4列。从视觉上看,这使得查找较大列表中的项目变得困难。我需要的输出是这样的:
<ul>
<li><a href="~">Boots</a></li>
<li><a href="~">Helmet Accessories</a></li>
<li><a href="~">Pants</a></li>
<li><a href="~">Riding Suits</a></li>
<li><a href="~">Eyewear</a></li>
<li><a href="~">Helmets</a></li>
<li><a href="~">Protection</a></li>
<li><a href="~">Riding Underwear</a></li>
<li><a href="~">Gloves</a></li>
<li><a href="~">Jackets</a></li>
<li><a href="~">Rainwear</a></li>
<li><a href="~">Socks</a></li>
<li><a href="~">Heated Gear</a></li>
<li><a href="~">Mechanic's Wear</a></li>
<li><a href="~">Random Apparel</a></li>
<li><a href="~">Vests</a></li>
</ul>
什么我要找的是我可以通过我的列表项阵列,并得到我的数组的函数返回的,按字母顺序排序,选择的弹性模量;在这种情况下4.
任何帮助将不胜感激,因为我没有找到关于这个问题的文件。
-
Alphabetize your list。这已经完成,你的情况,但如果不是:
function alphabetizeElements(a, b) { var aText = $(a).text(); var bText = $(b).text(); return aText > bText ? 1 : aText < bText ? -1 : 0; } var alphabetizedList = $("#myList li").sort(alphabetizeElements);
-
商店每个元素的按字母顺序排列的索引:
$.each(alphabetizedList, function(i) { $(this).data("alphaIndex", i); });
-
排序按字母顺序列出的模量第一,然后指数:
function listColumnSortFn(columns) { return function(a, b) { var aIndex = $(a).data("alphaIndex"); var bIndex = $(b).data("alphaIndex"); return ((aIndex % columns) - (bIndex % columns)) || (aIndex - bIndex); } } var columnSortedList = alphabetizedList.sort(listColumnSortFn(4));
-
用您的排序元素替换列表元素:
$("#myList li").remove(); $("#myList").append(columnSortedList);
这里是整个事情,都在一起:
function sortList(columns)
{
var alphabetizedList = $("#myList li").sort(alphabetizeElements);
$.each(alphabetizedList, function(i)
{
$(this).data("alphaIndex", i);
});
var columnSortedList = alphabetizedList.sort(listColumnSortFn(columns));
$("#myList li").remove();
$("#myList").append(columnSortedList);
}
function alphabetizeElements(a, b)
{
var aText = $(a).text();
var bText = $(b).text();
return aText > bText ? 1 : aText < bText ? -1 : 0;
}
function listColumnSortFn(columns)
{
return function(a, b)
{
var aIndex = $(a).data("alphaIndex");
var bIndex = $(b).data("alphaIndex");
return ((aIndex % columns) - (bIndex % columns)) || (aIndex - bIndex);
}
}
$(function()
{
sortList(4);
});
var columnify = function (a,n) {
var result = [];
for (var i = 0, lastIndex = a.length - 1; i < lastIndex; i++)
result.push(a[i * n % (lastIndex)]);
result[lastIndex] = a[lastIndex];
return result;
}
var products = ["Boots",
"Eyewear",
"Gloves",
"Heated Gear",
"Helmet Accessories",
"Helmets",
"Jackets",
"Mechanic's Wear",
"Pants",
"Protection",
"Rainwear",
"Random Apparel",
"Riding Suits",
"Riding Underwear",
"Socks",
"Vests",]
columnify(products, 4)
["Boots", "Helmet Accessories", "Pants", "Riding Suits", "Eyewear", "Helmets", "Protection", "Riding Underwear", "Gloves", "Jackets", "Rainwear", "Socks", "Heated Gear", "Mechanic's Wear", "Random Apparel", "Vests"]
将该函数应用于已排序的列表,然后它将返回您想要的顺序(几乎)的字符串列表。然后添加为了DOM中的无序列表返回的列表。
另外,我还没有测试它与除列表之外的任何东西。所以如果我是你,我会这么做。从我所看到的情况来看,只有当列表的长度是n
的倍数时才有效。这不是一个很好的解决方案,但对我来说已经很晚了,我不能为提出更好的方案而烦恼。
编辑:固定的最后一个元素
该理论相当合理但实施不正确。传入n = 4的17个元素的数组将产生0 4 8 12四次,最后一行将在第五行中返回16。 – ErikE 2010-09-10 06:44:38
@Emtucidifor:是的。就像我说的,当n%lenght!= 0时它不起作用。 – 2010-09-10 10:18:24
问题看看这将工作:http://jsfiddle.net/6xm9m/2
var newList = new Array();
var listItem = $('#list > li');
var mod = 4;
var colCount = Math.ceil(listItem.length/mod);
listItem.each(function(index) {
var newIndex = ((index % colCount) * mod) + Math.floor(index/colCount);
// $(this).text(newIndex);
newList[newIndex] = this;
});
$('#list').empty();
for(var i = 0; i < newList.length; i++){
$('#list').append(newList[i]);
}
需要改进,可能是,但我真的不知道怎么好这个在所有工作。
在这里,你去。一旦你想出来,代码就非常简单了。我意识到你正在使用jQuery,但我不熟悉它使用它的功能。这很简单,也许没有必要。
function pivotArray(arr, columns) {
var l = arr.length, out = [], ind = 0, i = 0;
for (; i < l; i += 1) {
out[ind] = arr[i];
ind += columns;
if (ind >= l) {
ind = ind % columns + 1;
}
}
return out;
}
而这里的测试,以证明它的工作原理(在Firefox 3.6.9,IE 6,Chrome浏览器1.0.154.36测试):
<html>
<head>
<style type="text/css">
a.panelnum {
display:block;
float:left;
width:40px;
height:40px;
border:1px solid black;
text-align:center;
vertical-align:middle;
text-decoration:none;
font-size:2em;
}
</style>
</head>
<body onload="doit(17, 4);">
<div id="output" style="border:1px solid blue;">
</div>
<script type="text/javascript">
function pivotArray(arr, columns) {
var l = arr.length, out = [], ind = 0, i = 0;
for (; i < l; i += 1) {
out[ind] = arr[i];
ind += columns;
if (ind >= l) {
ind = ind % columns + 1;
}
}
return out;
}
function doit(size, columns) {
document.getElementById('output').innerHTML = 'starting';
var l = size;
var inp = [];
for (var i = 0; i < l; i += 1) {
inp[i] = i;
}
var result = pivotArray(inp, columns);
var str = '';
for (i = 0; i < l; i += 1) {
str += '<a class="panelnum">' + result[i] + '</a>';
}
var d = document.getElementById('output')
d.innerHTML = '<p>Some pre text</p>' + str + '<p style="clear:both;">and some post text</p>';
d.style.width = (columns * d.childNodes[1].offsetWidth + 2) + 'px';
}
</script>
</body>
</html>
一两件事:它可能是只招有用在就地的元素。我几乎有脚本,但我的脚本倒退(仿佛浮动从上到下首先)。如果我有时间,我会处理它并发布代码。
P.S.任何人都想给我指出为什么我必须添加2到IE6的宽度计算?等等......这是div的边界不是吗?
你能张贴你已经拥有的代码? – 2010-09-10 02:03:42
而且,假设您是从后端开发的,为什么不在服务器端执行此操作? – Chubas 2010-09-10 02:07:51
实际上有一个CSS解决方案,'column-count' – 2010-09-10 02:10:52