2010-09-10 152 views
8

我没有任何困难获取元素列表并按字母顺序对它们进行排序,但是我很难理解如何使用模数进行排序。使用模数按字母顺序对列表进行排序

### 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.

任何帮助将不胜感激,因为我没有找到关于这个问题的文件。

+0

你能张贴你已经拥有的代码? – 2010-09-10 02:03:42

+0

而且,假设您是从后端开发的,为什么不在服务器端执行此操作? – Chubas 2010-09-10 02:07:51

+1

实际上有一个CSS解决方案,'column-count' – 2010-09-10 02:10:52

回答

2
  1. 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); 
    
  2. 商店每个元素的按字母顺序排列的索引:

    $.each(alphabetizedList, function(i) 
    { 
        $(this).data("alphaIndex", i); 
    }); 
    
  3. 排序按字母顺序列出的模量第一,然后指数:

    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)); 
    
  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); 
}); 
0
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的倍数时才有效。这不是一个很好的解决方案,但对我来说已经很晚了,我不能为提出更好的方案而烦恼。

编辑:固定的最后一个元素

+0

该理论相当合理但实施不正确。传入n = 4的17个元素的数组将产生0 4 8 12四次,最后一行将在第五行中返回16。 – ErikE 2010-09-10 06:44:38

+0

@Emtucidifor:是的。就像我说的,当n%lenght!= 0时它不起作用。 – 2010-09-10 10:18:24

0

问题看看这将工作: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]); 
} 

需要改进,可能是,但我真的不知道怎么好这个在所有工作。

0

在这里,你去。一旦你想出来,代码就非常简单了。我意识到你正在使用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的边界不是吗?

相关文章