मॉड्यूलस

Question

के साथ वर्णानुक्रम में एक सूची क्रमबद्ध करना मुझे तत्वों की सूची को पकड़ने और उन्हें वर्णानुक्रम में क्रमबद्ध करने में कोई दिक्कत नहीं है, लेकिन मुझे यह समझने में कठिनाई हो रही है कि इसे मॉड्यूलस के साथ कैसे किया जाए।

### अद्यतन ###

यहाँ काम कर रहे 'मेरे रास्ते' कोड तथापि, मैं और अधिक नीचे प्रदान की जवाब की फिर से प्रयोज्य पसंद है, तो यह है कि इस सवाल का जवाब स्वीकार कर लिया है है,।

<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 कॉलम में प्रदर्शित करने के लिए सेट करने के तुरंत जारी: मैं निम्नलिखित बिना क्रम वाली सूची है कहो। दृश्यमान यह बड़ी सूचियों में आइटम ढूंढना मुश्किल बनाता है। उत्पादन की आवश्यकता यह है:

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

किसी भी मदद की सराहना की जाएगी क्योंकि मुझे इस विषय पर कोई दस्तावेज नहीं मिल रहा है।

Answer 1

1. अपनी सूची को वर्णित करें। यह पहले से ही अपने मामले में किया जाता है,, लेकिन यदि नहीं:

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

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

उस फ़ंक्शन को पहले से क्रमबद्ध सूची में लागू करें, और फिर यह क्रम में (लगभग) क्रम में तारों की एक सूची वापस कर देगा। फिर डीओएम में अनियंत्रित सूची के लिए वापस लौटाई गई सूची जोड़ें।

इसके अलावा, मैंने उस सूची के अलावा किसी भी चीज़ के साथ इसका परीक्षण नहीं किया है। तो मैं ऐसा करूँगा अगर मैं तुम थे। जो कुछ मैं देखता हूं, वह केवल तभी काम करता है जब सूची की लंबाई n का एक बहु है। समाधान का इतना अच्छा नहीं है लेकिन यह मेरे लिए देर हो चुकी है और मुझे कुछ भी बेहतर तरीके से आने के लिए परेशान नहीं किया जा सकता है।

संपादित करें: पिछले तत्व

Answer 3

से जुड़ी समस्या सुलझा अगर यह काम करेंगे देखें: 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]); 
} 

की जरूरत है सुधार, शायद, लेकिन मैं वास्तव में यकीन है कि कितनी अच्छी तरह यह सब पर काम करता है नहीं कर रहा हूँ।

Answer 4

यहां आप जाते हैं। एक बार जब आप इसे समझ लें तो कोड आश्चर्यजनक रूप से सरल है। मुझे एहसास है कि आप 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; 
} 

और यहाँ परीक्षण है साबित करने के लिए यह काम करता है (फ़ायरफ़ॉक्स 3.6.9, IE 6, क्रोम 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> 

एक और बात: यह सिर्फ स्थानांतरित करने के लिए उपयोगी हो सकता है जगह के आसपास के तत्व। मेरे पास लगभग इसके लिए स्क्रिप्ट थी लेकिन मेरी लिपि पीछे की तरफ दौड़ रही थी (जैसे कि फ्लोट पहले से नीचे तक चला गया था)। अगर मुझे समय मिलता है तो मैं इस पर काम करूंगा और कोड पोस्ट करूंगा।

पीएस कोई भी मुझे पॉइंटर्स देना चाहता है कि मुझे आईई 6 के लिए चौड़ाई की गणना में 2 क्यों जोड़ना पड़ा? रुको ... यह div की सीमा है ना?