Question

Need some jQuery advice…

I have in DOM divs with delimited entries like this:

<div class="my-data">collie; german shepherd;</div>
<div class="my-data">collie; cocker spaniel; pug; poodle;</div>
<div class="my-data">poodle; german shepherd;</div>

I need to convert this to an alphabetized list with duplicates removed:

<ul id="new-list">
<li>cocker spaniel</li>
<li>collie</li>
<li>german shepherd</li>
<li>poodle</li>
<li>pug</li>
</ul>

Trying to determine the fastest jQuery method to achieve this; I’ll have about 500 divs on a page to convert when a page loads.

Answer 1

var $myData = $('.my-data').detach(), list = [], listHtml = ['<ul><li>'];

$myData.each(function(i, el) {
    var txt = $(el).text().split(';');
    $.each(txt, function(idx, val) {
        var val = $.trim(val);
        if (val && val != '' && $.inArray(val, list) == -1) {
         list.push(val);
        }
    });
});

list.sort();
listHtml.push(list.join('</li><li>'));
listHtml.push('</li></ul>');

$('body').append(listHtml.join(''));

DEMO : http://jsfiddle.net/BWBsj/