JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<p style="font-weight:bold; text-decoration: underline;">jQuery plugin - bokstaver som meny for enkel liste ?</p>
<br>
    
<ul id="liste">
    <li>Araber</li>
    <li>Apekatt</li>
    <li>Bamse</li>
    <li>automobil</li>
    <li>alle barna</li>
    <li>Kurt</li>
    <li>Liste</li>
    <li>Ole, Dole, Doffen</li>
    <li>Webforumet</li>
    <li>Hele setninger går helt fint</li>
    <li>Det gjør øæå også !</li>
    <li>Ærlig</li>
    <li>Erindre</li>
    <li>Fantasmagorisk</li>
    <li>Coca Cola</li>
    <li>Trykkfeil</li>
    <li>Avis</li>
    <li>Håkon V</li>
    <li>Lorem Ipsum</li>
    <li>poco loco</li>
    <li>katt</li>
    <li>hund</li>
    <li>undulat</li>
    <li>kråke</li>
    <li>elg</li>
</ul>

CSS

#liste {list-style:none;}

.letters {float:left; margin: 0 10px; font-weight: bold;  cursor: pointer;}
.letters:hover {color:blue;}
.letters.active {color:red;}

JavaScript

//jQuery plugin
$.fn.sorterListe = function() {
    return this.each(function() {
        var menu = $('<ul />', {'class': 'liste_menu', style:'list-style:none;'}),
            li   = [],
            that = $(this);
        
            that.children().each(function(i, el) { 
                var letter = $(el).text().charAt(0).toUpperCase();
                if ( $.inArray(letter, li) == -1 ) li.push(letter);
            });
        
        li.sort(function(a,b) {
            return a.localeCompare(b);
        });
        
        $.each(li, function(i, list) {
            menu.append( $('<li />', {'class':'letters', text:list}) );
        });
        
        that.before(menu).before('<br>');
        
        menu.on('click', '.letters', function() {
            var self = $(this);
            self.addClass('active').siblings('li').removeClass('active');
            $(that).children('li').each(function() {
                $(this).toggle( $(this).text().charAt(0).toUpperCase() == self.text().charAt(0).toUpperCase() );
            });
        }).find('li').eq(0).trigger('click');
    
    });
};

// brukes slik

$('#liste').sorterListe();