我有这个html列表被放入字母数组
<div class="container">
<ul class="list-items" id="1">
<li class="0-9"><a href="/courses/art-design-and-photography/hnc-3d-computer-animation">3D Computer Animation</a> HNC SCQF Level 7 </li>
<li class="A"><a href="/courses/business-and-management/hnc-accounting">Accounting</a> HNC SCQF Level 7 </li>
<li class="A"><a href="/courses/business-and-management/hnd-accounting">Accounting</a> HND SCQF Level 8 </li>
<li class="A"><a href="/courses/business-and-management/ncga-administration">Administration</a> NCGA SCQF Level 5 </li>
<li class="A"><a href="/courses/business-and-management/svq-administration">Administration</a> SVQ SCQF Level 5 </li>
<li class="A"><a href="/courses/business-and-management/hnc-administration-information">Administration & Information</a> HNC SCQF Level 7 </li>
<li class="A"><a href="/courses/business-and-management/hnd-administration-information">Administration & Information</a> HND SCQF Level 8 </li>
<li class="A"><a href="/courses/computing-and-it/advanced-ecdl-word-processing-2013">Advanced ECDL: Word Processing 2013 </a> Equivalent to SCQF Level 4 </li>
<li class="A"><a href="/courses/business-and-management/hnd-advertising-pr">Advertising & PR</a> HND SCQF Level 8 </li>
<li class="A"><a href="/courses/care/award-alcohol-awareness">Alcohol Awareness</a> Award, Level 1 Equivalent to SCQF Level 4 </li>
<li class="A"><a href="/courses/animal-care/introduction-animal-care">Animal Care</a> Introduction SCQF Level 4/5 </li>
<li class="A"><a href="/courses/animal-care/nc-animal-care">Animal Care</a> NC SCQF Level 5 </li>
<li class="A"><a href="/courses/animal-care/hnd-animal-care">Animal Care</a> HND SCQF Level 8 </li>
<li class="A"><a href="/courses/art-design-and-photography/art-design">Art & Design</a> SCQF Level 4/5 </li>
<li class="A"><a href="/courses/art-design-and-photography/nc-art-design">Art & Design</a> NC SCQF Level 6 </li>
<li class="A"><a href="/courses/art-design-and-photography/hnc-art-design">Art & Design</a> HNC SCQF Level 7 </li>
<li class="A"><a href="/courses/art-design-and-photography/hnd-art-design">Art & Design</a> HND SCQF Level 8 </li>
<li class="A"><a href="/courses/automotive-and-construction/diploma-automotive-accident-repair-principles-body-paint">Automotive Accident Repair Principles (Body & Paint)</a> Diploma SCQF Level 4 </li>
<li class="A"><a href="/courses/automotive-and-construction/diploma-automotive-maintenance-repair-principles">Automotive Maintenance & Repair Principles</a> Diploma, Level 1 SCQF Level 4 </li>
<li class="A"><a href="/courses/automotive-and-construction/diploma-automotive-maintenance-repair-principles-0">Automotive Maintenance & Repair Principles</a> Diploma, Level 2 SCQF Level 5 </li>
<li class="B"><a href="/courses/automotive-and-construction/nc-built-environment">Built Environment</a> NC SCQF Level 5/6 </li>
<li class="B"><a href="/courses/automotive-and-construction/hnc-built-environment">Built Environment</a> HNC SCQF Level 7 </li>
<li class="B"><a href="/courses/business-and-management/ncga-business">Business</a> NCGA SCQF Level 5 </li>
<li class="B"><a href="/courses/business-and-management/hnc-business">Business</a> HNC SCQF Level 7 </li>
<li class="B"><a href="/courses/business-and-management/hnd-business">Business</a> HND SCQF Level 8 </li>
<li class="B"><a href="/courses/business-and-management/introduction-business-administration">Business & Administration</a> Introduction SCQF Level 4 </li>
<li class="B"><a href="/courses/business-and-management/ncga-business-with-esol">Business with ESOL</a> NCGA SCQF Level 4 </li>
<li class="C"><a href="/courses/art-design-and-photography/nc-computer-arts-animation">Computer Arts & Animation</a> NC SCQF Level 6 </li>
<li class="C"><a href="/courses/automotive-and-construction/introduction-construction-crafts">Construction (Crafts)</a> Introduction SCQF Level 4/5 </li>
<li class="E"><a href="/courses/esol/pre-intermediate-english-for-speakers-of-other-languages-esol">English for Speakers of Other Languages (ESOL)</a> Pre-intermediate, Pre-intermediate Equivalent to SCQF Level 5 </li>
<li class="E"><a href="/courses/esol/pre-intermediate-english-for-speakers-of-other-languages-pt">English for Speakers of Other Languages (ESOL)</a> Pre-intermediate, Pre-intermediate SCQF Level 1 </li>
<li class="E"><a href="/courses/business-and-management/hnd-events-management">Events Management</a> HND SCQF Level 8 </li>
<li class="F"><a href="/courses/art-design-and-photography/nc-fashion-design-manufacture">Fashion Design & Manufacture</a> NC SCQF Level 6 </li>
<li class="F"><a href="/courses/art-design-and-photography/city-guilds-level-2-diploma-floristry">Floristry</a> City & Guilds Level 2 Diploma SCQF Level 5 </li>
<li class="G"><a href="/courses/automotive-and-construction/npa-general-building">General Building</a> NPA SCQF Level 5 </li>
<li class="I"><a href="/courses/computing-and-it/it-in-business-word-processing-and-presentations">IT in Business: Word Processing and Presentations</a> Equivalent to SCQF Level 5 </li>
<li class="L"><a href="/courses/business-and-management/hnd-legal-services">Legal Services</a> HND SCQF Level 8 </li>
<li class="P"><a href="/courses/art-design-and-photography/nc-photography">Photography</a> NC SCQF Level 6 </li>
<li class="P"><a href="/courses/art-design-and-photography/hnd-photography">Photography</a> HND SCQF Level 8 </li>
<li class="R"><a href="/courses/engineering/rya-day-skipper-shore-based-course">RYA Day Skipper Shore Based Course</a> </li>
<li class="S"><a href="/courses/care/supporting-people-with-down-syndrome">Supporting People with Down Syndrome</a> Equivalent to SCQF Level 4 </li>
<li class="T"><a href="/courses/art-design-and-photography/hnd-textiles">Textiles</a> HND SCQF Level 8 </li>
<li class="T"><a href="/courses/engineering/thermofluids">Thermofluids</a> Equivalent to SCQF Level 4 </li>
<li class="T"><a href="/courses/business-and-management/nc-travel-tourism">Travel & Tourism</a> NC SCQF Level 5 </li>
<li class="T"><a href="/courses/business-and-management/hnd-travel-tourism">Travel & Tourism</a> HND SCQF Level 8 </li>
<li class="T"><a href="/courses/business-and-management/nc-travel-tourism-with-esol">Travel & Tourism with ESOL</a> NC SCQF Level 5 </li>
<li class="U"><a href="/courses/care/certificate-understanding-end-of-life-care">Understanding End of Life Care</a> Certificate, Level 2 Equivalent toSCQF Level 4 </li>
<li class="V"><a href="/courses/animal-care/city-guilds-level-3-diploma-veterinary-nursing-small-animal">Veterinary Nursing (Small Animal)</a> City & Guilds Level 3 Diploma SCQF Level 6 </li>
<li class="V"><a href="/courses/art-design-and-photography/hnd-visual-communication">Visual Communication</a> HND SCQF Level 8 </li>
<li class="W"><a href="/courses/computing-and-it/advanced-word">Word</a> Advanced Equivalent to SCQF Level 4 </li>
</ul>
</div>
基本上，我尝试做的是将此列表拆分为按字母顺序排列的列，但我很难将数组的计数实际添加到列[index]数组中。
如果定义了4列，那么我会计算列表项并将它们除以4，得到每列的平均项数。因此，将列表项保存在其字母组中，我将0-9与A合并，以便每列超过12.5（50项/ 4列）项。
然后转到计算下一个列表数组的下一列[例如B]，看它是否超过每列的平均数量。如果没有，请将其与[C或下一个]合并。
这是我到目前为止的js：
(function($) {
$.fn.listsplitter = function( options ) {
var settings = $.extend({
columns: 4
}, options);
var column_width = 100 / settings.columns;
var total_items = $(this).children("li").length;
var items_per_column = Math.floor(total_items / settings.columns);
// Start grouping the items into alphabetical arrays
var itemArray = [];
$.each($(".list-items li"), function(index, value){
var text = $(value).text();
var firstLetter = text.charAt(0);
if($.isNumeric(firstLetter)) { firstLetter = "0-9"; }
if(!itemArray[firstLetter]) itemArray[firstLetter] = [];
itemArray[firstLetter].push(this.outerHTML);
});
console.log(itemArray);
// console.log(itemArray.length);
// console.log(itemArray['A']);
// console.log(itemArray['A'].length);
$.each(itemArray, function(key1, value1) {
console.log(itemArray[key1]);
});
// Start building the columns
for(i = 0;i < settings.columns;i++)
{
$.each(itemArray, function(index, value) {
console.log($(this));
if($(this).length > items_per_column)
{
console.log($(this)["A"].length);
}
console.log($(this).length);
});
}
}
}( jQuery ));
这是一个棘手的问题，我非常感谢能得到的所有帮助。提前谢谢！
答案 0 :(得分：1)
使用此代码作为起点
var colums = 4;
var buckets = [];
for (var i = colums - 1; i >= 0; i--) {
buckets.push([]);
};
var elems = $('li').toArray();
//or just document.querySelectorAll
var threshold = elems.length/colums;
var currThreshold = threshold;
var currBucket = 0;
var groups = _.groupBy(elems, function(elem){
//return elem.className;
//we can also just rely on inner text
return elem.textContent[0].replace(/[0-9]/,'0-9');
});
_.forEach(groups,function(group){
if(currThreshold < 0) {
currThreshold = threshold;
currBucket++;
}
currThreshold -= group.length;
//for (var i = 0; i < group.length; i++) {
// buckets[currBucket].push(group[i])
//};
//or we can spare the loop
Array.prototype.push.apply(buckets[currBucket], group);
})
//now lets do something with the buckets
_.forEach(buckets,function(bucket){
$(bucket).last().addClass('wrap');
})
注意我使用groupBy库中的函数forEach和underscore.js。