jQuery splitting html list items

Question

I have this html list which is being put into alphabetical arrays

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

basically, what I'm trying to do is split this list into alphabetical columns, but I'm struggling to get the count of the arrays to actually add them to the column[index] array.

If 4 columns are defined then I count the list items and divide them by 4 giving me an average number of items per column. So then keeping the list items in their alphabetical groups I would merge 0-9 with A to go over 12.5 (50 items / 4 columns) items per column.

Then move onto the next column counting the next list array [B for example] to see if it is over the average amount per column. If not, merge it with [C or whatever is next].

Here's the js I got so far:

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

This is a tricky one, I do appreciate all the help I can get. Thanks in advance!

Valerij · Accepted Answer · 2014-07-29 14:06:44Z

use this code as starting point

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

note i use functions groupBy and forEach from underscore.js library.

Collectives™ on Stack Overflow

jQuery splitting html list items

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related