jQuery拆分html列表项

我有这个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 &amp; Information</a> HNC SCQF Level     7  </li>
        <li class="A"><a href="/courses/business-and-management/hnd-administration-information">Administration &amp; 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 &amp; 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 &amp; Design</a> SCQF Level     4/5  </li>
        <li class="A"><a href="/courses/art-design-and-photography/nc-art-design">Art &amp; Design</a> NC SCQF Level     6  </li>
        <li class="A"><a href="/courses/art-design-and-photography/hnc-art-design">Art &amp; Design</a> HNC SCQF Level     7  </li>
        <li class="A"><a href="/courses/art-design-and-photography/hnd-art-design">Art &amp; 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 &amp; Paint)</a> Diploma SCQF Level     4  </li>
        <li class="A"><a href="/courses/automotive-and-construction/diploma-automotive-maintenance-repair-principles">Automotive Maintenance &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; Tourism</a> NC SCQF Level     5  </li>
        <li class="T"><a href="/courses/business-and-management/hnd-travel-tourism">Travel &amp; Tourism</a> HND SCQF Level     8  </li>
        <li class="T"><a href="/courses/business-and-management/nc-travel-tourism-with-esol">Travel &amp; 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 &amp; 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>

HNC SCQF第7级
HNC SCQF第7级
HND SCQF第8级
NCGA SCQF第5级
SVQ SCQF第5级
HNC SCQF第7级
HND SCQF第8级
相当于SCQF 4级
HND SCQF第8级
1级奖励相当于SCQF 4级奖励
SCQF 4/5级简介
NC SCQF第5级
HND SCQF第8级
SCQF 4/5级
NC SCQF第6级
HNC SCQF第7级
HND SCQF第8级
SCQF四级文凭
文凭，1级SCQF 4级
文凭，2级SCQF 5级
NC SCQF第5/6级
HNC SCQF第7级
NCGA SCQF第5级
HNC SCQF第7级
HND SCQF第8级
SCQF第4级简介
NCGA SCQF第4级
NC SCQF第6级
SCQF 4/5级简介
中级前，中级前相当于SCQF 5级
中级前、中级前SCQF 1级
HND SCQF第8级
NC SCQF第6级
城市与城市；公会二级文凭SCQF五级
NPA SCQF第5级
等同于SCQF第5级
HND SCQF第8级
NC SCQF第6级
HND SCQF第8级

相当于SCQF 4级
HND SCQF第8级
相当于SCQF 4级
NC SCQF第5级
HND SCQF第8级
NC SCQF第5级
证书，2级，相当于CQF 4级
城市与城市；公会3级文凭SCQF 6级
HND SCQF第8级
高级相当于SCQF 4级

基本上，我要做的是将这个列表拆分成按字母顺序排列的列，但我很难得到数组的计数，以便将它们实际添加到列[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 ));

（函数（$）{
$.fn.listsplitter=函数（选项）{
变量设置=$.extend({
栏目：4
}，选项）；
var column_width=100/settings.columns；
var total_items=$（this）.children（“li”）.length；
var items\u per_column=数学地板（总项目/设置栏）；
//开始将项目分组为字母数组
var itemArray=[]；
$.each（$（“.list items li”）、函数（索引、值）{
var text=$（值）.text（）；
var firstLetter=text.charAt（0）；
如果（$.isNumeric（firstLetter））{firstLetter=“0-9”；}
如果（！itemArray[firstLetter]）itemArray[firstLetter]=[]；
itemArray[firstLetter].push（this.outerHTML）；
});
log（itemArray）；
//log（itemArray.length）；
//log（itemArray['A']）；
//log（itemArray['A'].length）；
$.each（项数组，函数（键1，值1）{
log（itemArray[key1]）；
});
//开始建造柱子
对于（i=0；i每列项目）
{
log（$（this）[“A”].length）；
}
console.log（$（this.length）；
});
}
}
}（jQuery））；

---

这是一个棘手的问题，我非常感谢所有能得到的帮助。提前谢谢

使用此代码作为起点

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

var colums=4；
var=[]；
对于（var i=colums-1；i>=0；i--）{
桶。推（[]）；
};
var elems=$（'li'）.toArray（）；
//或者只是document.queryselectoral
var阈值=元素长度/列；
var currThreshold=阈值；
var=0；
var groups=u.groupBy（元素，函数（元素）{
//返回elem.className；
//我们也可以仅仅依靠内部文本
返回elem.textContent[0]。替换（/[0-9]/，'0-9'）；
});
_.forEach（组、函数（组）{
如果（电流阈值<0）{
currThreshold=阈值；
currBucket++；
}
currThreshold-=组长度；
//对于（变量i=0；i