Sắp xếp danh sách theo thứ tự bảng chữ cái với mô-đun

Question

Tôi không gặp khó khăn khi lấy danh sách các phần tử và sắp xếp theo thứ tự bảng chữ cái, nhưng tôi đang gặp khó khăn khi hiểu cách thực hiện nó bằng mô-đun.

### CẬP NHẬT ###

Dưới đây là đoạn code làm việc 'theo cách của tôi', tuy nhiên, tôi thích việc tái khả năng sử dụng của câu trả lời cung cấp dưới đây hơn, do đó đã chấp nhận câu trả lời đó.

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

Ví dụ: Giả sử tôi có danh sách không theo thứ tự sau:

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

Tôi có danh sách này được đặt để hiển thị trong 4 cột với mỗi li được thả nổi bên phải. Điều này làm cho việc tìm kiếm các mục trong danh sách lớn trở nên khó khăn. Kết quả tôi cần là thế này:

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

Những gì tôi đang tìm kiếm là một chức năng mà tôi có thể vượt qua mảng của tôi về mục danh sách và nhận mảng của tôi trở lại, sắp xếp theo thứ tự abc, với một mô đun của sự lựa chọn; trong trường hợp này 4.

Bất kỳ trợ giúp nào sẽ được đánh giá cao vì tôi không thể tìm thấy tài liệu về chủ đề này.

Answer 1

1. Alphabetize danh sách của bạn. Điều này đã được thực hiện, trong trường hợp của bạn, nhưng nếu không:

   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. Store chỉ số theo thứ tự abc của mỗi yếu tố:

   $.each(alphabetizedList, function(i) 
   { 
       $(this).data("alphaIndex", i); 
   }); 
   

3. Sắp xếp danh sách theo thứ tự abc bằng cách mô đun đầu tiên, sau đó chỉ số:

   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. Thay thế các phần tử danh sách bằng các yếu tố được sắp xếp của bạn:

   $("#myList li").remove(); 
   $("#myList").append(columnSortedList); 
   

Dưới đây là toàn bộ sự việc, tất cả cùng nhau:

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); 
}); 

Answer 2

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"] 

Áp dụng hàm đó vào danh sách đã sắp xếp và sau đó sẽ trả về danh sách các chuỗi theo thứ tự (gần như) mà bạn muốn. Sau đó, thêm danh sách được trả lại để danh sách không có thứ tự trong DOM.

Ngoài ra, tôi chưa thử nghiệm nó với bất kỳ thứ gì ngoài danh sách đó. Vì vậy, tôi sẽ làm điều đó nếu tôi là bạn. Từ những gì tôi thấy, nó chỉ hoạt động nếu độ dài của danh sách là bội số của n. Không phải là một giải pháp tuyệt vời nhưng nó đã muộn cho tôi và tôi không thể bị làm phiền để tìm ra thứ gì tốt hơn.

EDIT: khắc phục sự cố với yếu tố cuối cùng

Answer 3

Xem nếu điều này sẽ làm việc: 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]); 
} 

nhu cầu cải tiến, có lẽ, nhưng tôi không thực sự chắc chắn như thế nào này hoạt động ở tất cả.

Answer 4

Thông tin cho bạn đây. Mã đơn giản một cách đáng ngạc nhiên khi bạn tìm ra nó. Tôi nhận ra bạn đang sử dụng jQuery nhưng tôi không quen thuộc với nó để sử dụng các tính năng của nó. Điều này là đơn giản, đủ để có thể nó không cần thiết.

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; 
} 

Và đây là thử nghiệm để chứng minh điều đó công trình (thử nghiệm trong 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> 

Một điều nữa: nó có thể là hữu ích để chỉ di chuyển các yếu tố xung quanh tại chỗ. Tôi gần như đã có kịch bản cho nó, nhưng kịch bản của tôi đã chạy ngược (như thể nổi từ đầu đến cuối). Nếu tôi nhận được thời gian tôi sẽ làm việc trên nó và gửi mã.

P.S. Bất cứ ai muốn cung cấp cho tôi gợi ý về lý do tại sao tôi phải thêm 2 vào tính toán chiều rộng cho IE6? Đợi ... đó là biên giới của div phải không?