Можно ли создать алфавитную вертикальную боковую панель в HTML/jQuery?

Question

У меня есть список имен «ul». Я хотел бы создать алфавитную вертикальную боковую панель, которая, когда я нажимаю на одно из его букв, имена li, начинающиеся с этой буквы, были отфильтрованы.

Example: это для мобильных устройств, мне это нужно для веб-приложений.

Я не нашел ни одного плагина или кода.

UPDATE: объяснение:

Список уже отсортирован. Мне нужна только алфавитная вертикальная боковая панель, используемая для прокрутки списка вверх и вниз.

Answer 1

Вы можете добиться этого легко сделать что-то вроде этого:

• Траверс списка.
• Если первый символ элемента списка отличается от предыдущего элемента списка:
  • Добавить уникальный идентификатор для этого элемента списка.
  • Добавить ссылку на алфавитный указатель (указав на уникальный идентификатор).

Простой код для достижения этой цели:

$("ul li").each(function() { 
    var current = $(this).text()[0]; 
    if (current != previous) { 
     $(this).attr("id", "first_letter_" + current); 
     previous = current; 
     $("#index").append("<a href='#first_letter_" + current + "'>" + current + "</a><br/>"); 
    } 
}); 

И вы можете видеть, что это работает на этом демо (или на этом JSFiddle):

$(document).ready(function() { 
 

 
    // set the previous to an invalid value 
 
    var previous = ""; 
 

 
    // create the lateral index holder 
 
    $("body").append("<div id='index'></div>"); 
 

 
    // traverse the list elements 
 
    $("ul li").each(function() { 
 

 
    // get the first character of that element 
 
    var current = $(this).text()[0]; 
 

 
    // if it's different from the previous one 
 
    if (current != previous) { 
 

 
     // add a unique id to the element 
 
     $(this).attr("id", "first_letter_" + current); 
 

 
     // update the previous value 
 
     previous = current; 
 

 
     // add a link into the alphabetical index 
 
     $("#index").append("<a href='#first_letter_" + current + "'>" + current + "</a><br/>"); 
 

 
    } 
 
    }); 
 

 
});

#index { 
 
    position:fixed; 
 
    top:0px; 
 
    right:0px; 
 
    width:30px; 
 
    background:rgba(0,0,0,0.1); 
 
    font-size:12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h2>List of Shakespearean characters:</h2> 
 
<ul> 
 
    <li>Aaron</li> 
 
    <li>Abbot</li> 
 
    <li>Abhorson</li> 
 
    <li>Abraham</li> 
 
    <li>Achilles</li> 
 
    <li>Adam</li> 
 
    <li>Adrian</li> 
 
    <li>Adriana</li> 
 
    <li>Aedile</li> 
 
    <li>Aegeon</li> 
 
    <li>Aemilia</li> 
 
    <li>Aemilius</li> 
 
    <li>Aeneas</li> 
 
    <li>Agamemnon</li> 
 
    <li>Agrippa</li> 
 
    <li>Ajax</li> 
 
    <li>Alcibiades</li> 
 
    <li>Alexander</li> 
 
    <li>Alexander Iden</li> 
 
    <li>Alexas</li> 
 
    <li>Alice</li> 
 
    <li>All</li> 
 
    <li>All Citizens</li> 
 
    <li>All Conspirators</li> 
 
    <li>All Ladies</li> 
 
    <li>All Lords</li> 
 
    <li>All Servants</li> 
 
    <li>All the Goths</li> 
 
    <li>All The People</li> 
 
    <li>Alonso</li> 
 
    <li>Ambassador</li> 
 
    <li>Amiens</li> 
 
    <li>Andromache</li> 
 
    <li>Angelo</li> 
 
    <li>Angus</li> 
 
    <li>Anne Bullen</li> 
 
    <li>Anne Page</li> 
 
    <li>Another</li> 
 
    <li>Antigonus</li> 
 
    <li>Antiochus</li> 
 
    <li>Antipholus of Ephesus</li> 
 
    <li>Antipholus of Syracuse</li> 
 
    <li>Antonio</li> 
 
    <li>Antony</li> 
 
    <li>Apemantus</li> 
 
    <li>Apothecary</li> 
 
    <li>Archbishop Cranmer</li> 
 
    <li>Archbishop of Canterbury</li> 
 
    <li>Archbishop Scroop</li> 
 
    <li>Archidamus</li> 
 
    <li>Ariel</li> 
 
    <li>Artemidorus</li> 
 
    <li>Arthur</li> 
 
    <li>Arviragus</li> 
 
    <li>Attendant</li> 
 
    <li>Attendants</li> 
 
    <li>Audrey</li> 
 
    <li>Autolycus</li> 
 
    <li>Bagot</li> 
 
    <li>Balthasar</li> 
 
    <li>Balthazar</li> 
 
    <li>Banditti</li> 
 
    <li>Banquo</li> 
 
    <li>Baptista Minola</li> 
 
    <li>Bardolph</li> 
 
    <li>Barnardine</li> 
 
    <li>Bassanio</li> 
 
    <li>Basset</li> 
 
    <li>Bassianus</li> 
 
    <li>Bastard of Orleans</li> 
 
    <li>Bates</li> 
 
    <li>Bawd</li> 
 
    <li>Beadle</li> 
 
    <li>Beatrice</li> 
 
    <li>Belarius</li> 
 
    <li>Benedick</li> 
 
    <li>Benvolio</li> 
 
    <li>Bernardo</li> 
 
    <li>Bertram</li> 
 
    <li>Bianca</li> 
 
    <li>Biondello</li> 
 
    <li>Biron</li> 
 
    <li>Bishop Lincoln</li> 
 
    <li>Bishop of Carlisle</li> 
 
    <li>Bishop of Ely</li> 
 
    <li>Blanch</li> 
 
    <li>Blunt</li> 
 
    <li>Boatswain</li> 
 
    <li>Bolingbroke</li> 
 
    <li>Bona</li> 
 
    <li>Borachio</li> 
 
    <li>Both</li> 
 
    <li>Both Citizens</li> 
 
    <li>Both Tribunes</li> 
 
    <li>Bottom</li> 
 
    <li>Boult</li> 
 
    <li>Boy</li> 
 
    <li>Boyet</li> 
 
    <li>Brabantio</li> 
 
    <li>Brandon</li> 
 
    <li>Brothers</li> 
 
    <li>Brutus</li> 
 
    <li>Bushy</li> 
 
    <li>Caesar</li> 
 
    <li>Caithness</li> 
 
    <li>Caius Lucius</li> 
 
    <li>Calchas</li> 
 
    <li>Caliban</li> 
 
    <li>Calpurnia</li> 
 
    <li>Camillo</li> 
 
    <li>Canidius</li> 
 
    <li>Caphis</li> 
 
    <li>Captain</li> 
 
    <li>Capucius</li> 
 
    <li>Capulet</li> 
 
    <li>Cardinal Bourchier</li> 
 
    <li>Cardinal Campeius</li> 
 
    <li>Cardinal Pandulph</li> 
 
    <li>Cardinal Wolsey</li> 
 
    <li>Carrier</li> 
 
    <li>Casca</li> 
 
    <li>Cassandra</li> 
 
    <li>Cassio</li> 
 
    <li>Cassius</li> 
 
    <li>Celia</li> 
 
    <li>Ceres</li> 
 
    <li>Cerimon</li> 
 
    <li>Chamberlain</li> 
 
    <li>Charles</li> 
 
    <li>Charles, King of France</li> 
 
    <li>Charmian</li> 
 
    <li>Chatillon</li> 
 
    <li>Children</li> 
 
    <li>Chiron</li> 
 
    <li>Chorus</li> 
 
    <li>Christopher Sly</li> 
 
    <li>Christopher Urswick</li> 
 
    <li>Cicero</li> 
 
    <li>Cinna</li> 
 
    <li>Cinna the Poet</li> 
 
    <li>Citizen</li> 
 
    <li>Citizens</li> 
 
    <li>Claudio</li> 
 
    <li>Claudius</li> 
 
    <li>Cleomenes</li> 
 
    <li>Cleon</li> 
 
    <li>Cleopatra</li> 
 
    <li>Clerk</li> 
 
    <li>Clerk of Chatham</li> 
 
    <li>Clitus</li> 
 
    <li>Cloten</li> 
 
    <li>Clown</li> 
 
    <li>Cobweb</li> 
 
    <li>Cominius</li> 
 
    <li>Commons</li> 
 
    <li>Conrade</li> 
 
    <li>Constable of France</li> 
 
    <li>Constance</li> 
 
    <li>Cordelia</li> 
 
    <li>Corin</li> 
 
    <li>Coriolanus</li> 
 
    <li>Cornelius</li> 
 
    <li>Costard</li> 
 
    <li>Countess</li> 
 
    <li>Countess of Auvergne</li> 
 
    <li>Court</li> 
 
    <li>Courtezan</li> 
 
    <li>Cressida</li> 
 
    <li>Crier</li> 
 
    <li>Cromwell</li> 
 
    <li>Cupid</li> 
 
    <li>Curan</li> 
 
    <li>Curio</li> 
 
    <li>Curtis</li> 
 
    <li>Cymbeline</li> 
 
    <li>Dancer</li> 
 
    <li>Dardanius</li> 
 
    <li>Daughter of Antiochus</li> 
 
    <li>Davy</li> 
 
    <li>Decius Brutus</li> 
 
    <li>Deiphobus</li> 
 
    <li>Demetrius</li> 
 
    <li>Dennis</li> 
 
    <li>Dercetas</li> 
 
    <li>Desdemona</li> 
 
    <li>Diana</li> 
 
    <li>Dick the Butcher</li> 
 
    <li>Diomedes</li> 
 
    <li>Dion</li> 
 
    <li>Dionyza</li> 
 
    <li>Doctor</li> 
 
    <li>Doctor Butts</li> 
 
    <li>Doctor Caius</li> 
 
    <li>Dogberry</li> 
 
    <li>Dolabella</li> 
 
    <li>Doll Tearsheet</li> 
 
    <li>Domitius Enobarus</li> 
 
    <li>Don Adriano de Armado</li> 
 
    <li>Don John</li> 
 
    <li>Don Pedro</li> 
 
    <li>Donalbain</li> 
 
    <li>Dorcas</li> 
 
    <li>Dromio of Ephesus</li> 
 
    <li>Dromio of Syracuse</li> 
 
    <li>Duchess of Gloucester</li> 
 
    <li>Duchess of York</li> 
 
    <li>Duke</li> 
 
    <li>Duke of Albany</li> 
 
    <li>Duke of Alencon</li> 
 
    <li>Duke of Aumerle</li> 
 
    <li>Duke of Bedford</li> 
 
    <li>Duke of Bourbon</li> 
 
    <li>Duke of Buckingham</li> 
 
    <li>Duke of Burgundy</li> 
 
    <li>Duke of Cornwall</li> 
 
    <li>Duke of Exeter</li> 
 
    <li>Duke of Florence</li> 
 
    <li>Duke of Gloucester</li> 
 
    <li>Duke of Milan</li> 
 
    <li>Duke of Norfolk</li> 
 
    <li>Duke of Orleans</li> 
 
    <li>Duke of Suffolk</li> 
 
    <li>Duke of Surrey</li> 
 
    <li>Duke of Venice</li> 
 
    <li>Duke of York</li> 
 
    <li>Duke/Earl of Somerset</li> 
 
    <li>Dull</li> 
 
    <li>Dumain</li> 
 
    <li>Duncan</li> 
 
    <li>Earl of Cambridge</li> 
 
    <li>Earl of Douglas</li> 
 
    <li>Earl of Gloucester</li> 
 
    <li>Earl of Kent</li> 
 
    <li>Earl of Northumberland</li> 
 
    <li>Earl of Salisbury</li> 
 
    <li>Earl of Suffolk</li> 
 
    <li>Earl of Surrey</li> 
 
    <li>Earl of Warwick</li> 
 
    <li>Earl of Westmoreland</li> 
 
    <li>Earl of Worcester</li> 
 
    <li>Earl Oxford</li> 
 
    <li>Edgar</li> 
 
    <li>Edmond, Earl of Rutland</li> 
 
    <li>Edmund</li> 
 
    <li>Edmund Mortimer</li> 
 
    <li>Edmund of Langley</li> 
 
    <li>Edward Poins</li> 
 
    <li>Egeus</li> 
 
    <li>Eglamour</li> 
 
    <li>Egyptian</li> 
 
    <li>Elbow</li> 
 
    <li>Eleanor</li> 
 
    <li>Emilia</li> 
 
    <li>English Herald</li> 
 
    <li>Eros</li> 
 
    <li>Escalus</li> 
 
    <li>Escanes</li> 
 
    <li>Essex</li> 
 
    <li>Euphronius</li> 
 
    <li>Fabian</li> 
 
    <li>Fairy</li> 
 
    <li>Falstaff</li> 
 
    <li>Fang</li> 
 
    <li>Father</li> 
 
    <li>Father John Hume</li> 
 
    <li>Father's Ghost</li> 
 
    <li>Faulconbridge</li> 
 
    <li>Fenton</li> 
 
    <li>Ferdinand</li> 
 
    <li>Feste</li> 
 
    <li>Fifth Citizen</li> 
 
    <li>First Ambassador</li> 
 
    <li>First Apparition</li> 
 
    <li>First Attendant</li> 
 
    <li>First Bandit</li> 
 
    <li>First Beadle</li> 
 
    <li>First British Captain</li> 
 
    <li>First Brother</li> 
 
    <li>First Carrier</li> 
 
    <li>First Citizen</li> 
 
    <li>First Clown</li> 
 
    <li>First Commoner</li> 
 
    <li>First Conspirator</li> 
 
    <li>First Executioner</li> 
 
    <li>First Fisherman</li> 
 
    <li>First Gaoler</li> 
 
    <li>First Gentleman</li> 
 
    <li>First Goth</li> 
 
    <li>First Groom</li> 
 
    <li>First Guard</li> 
 
    <li>First Herald</li> 
 
    <li>First Huntsman</li> 
 
    <li>First Keeper</li> 
 
    <li>First Knight</li> 
 
    <li>First Lady</li> 
 
    <li>First Lord</li> 
 
    <li>First Merchant</li> 
 
    <li>First Messenger</li> 
 
    <li>First Murderer</li> 
 
    <li>First Musician</li> 
 
    <li>First Neighbour</li> 
 
    <li>First Officer</li> 
 
    <li>First Outlaw</li> 
 
    <li>First Page</li> 
 
    <li>First Petitioner</li> 
 
    <li>First Pirate</li> 
 
    <li>First Player</li> 
 
    <li>First Roman</li> 
 
    <li>First Sailor</li> 
 
    <li>First Secretary</li> 
 
    <li>First Senator</li> 
 
    <li>First Sentinel</li> 
 
    <li>First Servant</li> 
 
    <li>First Servingman</li> 
 
    <li>First Serving-Man</li> 
 
    <li>First Soldier</li> 
 
    <li>First Stranger</li> 
 
    <li>First Traveller</li> 
 
    <li>First Tribune</li> 
 
    <li>First Warder</li> 
 
    <li>First Watchman</li> 
 
    <li>First Witch</li> 
 
    <li>Flaminius</li> 
 
    <li>Flavius</li> 
 
    <li>Fleance</li> 
 
    <li>Florizel</li> 
 
    <li>Fluellen</li> 
 
    <li>Flute</li> 
 
    <li>Fool</li> 
 
    <li>Ford</li> 
 
    <li>Forester</li> 
 
    <li>Fortinbras</li> 
 
    <li>Fourth Citizen</li> 
 
    <li>Fourth Gentleman</li> 
 
    <li>Fourth Lord</li> 
 
    <li>Fourth Messenger</li> 
 
    <li>Fourth Soldier</li> 
 
    <li>Francis</li> 
 
    <li>Francis Feeble</li> 
 
    <li>Francisca</li> 
 
    <li>Francisco</li> 
 
    <li>Frederick</li> 
 
    <li>French Herald</li> 
 
    <li>French Soldier</li> 
 
    <li>Frenchman</li> 
 
    <li>Friar Francis</li> 
 
    <li>Friar John</li> 
 
    <li>Friar Laurence</li> 
 
    <li>Friar Peter</li> 
 
    <li>Friar Thomas</li> 
 
    <li>Froth</li> 
 
    <li>Gadshill</li> 
 
    <li>Gallus</li> 
 
    <li>Gaoler</li> 
 
    <li>Gardener</li> 
 
    <li>Gardiner</li> 
 
    <li>Garter</li> 
 
    <li>General</li> 
 
    <li>Gentleman</li> 
 
    <li>Gentlemen</li> 
 
    <li>Gentlewoman</li> 
 
    <li>George Bevis</li> 
 
    <li>George Plantagenet (Duke of Clarence)</li> 
 
    <li>Gertrude</li> 
 
    <li>Girl</li> 
 
    <li>Glendower</li> 
 
    <li>Goneril</li> 
 
    <li>Gonzalo</li> 
 
    <li>Governor of Harfleur</li> 
 
    <li>Gower</li> 
 
    <li>Grandpre</li> 
 
    <li>Gratiano</li> 
 
    <li>Green</li> 
 
    <li>Gregory</li> 
 
    <li>Gremio</li> 
 
    <li>Griffith</li> 
 
    <li>Groom</li> 
 
    <li>Grumio</li> 
 
    <li>Guard</li> 
 
    <li>Guiderius</li> 
 
    <li>Guildenstern</li> 
 
    <li>Haberdasher</li> 
 
    <li>Hamlet</li> 
 
    <li>Harcourt</li> 
 
    <li>Hecate</li> 
 
    <li>Hector</li> 
 
    <li>Helen</li> 
 
    <li>Helena</li> 
 
    <li>Helenus</li> 
 
    <li>Helicanus</li> 
 
    <li>Henry IV</li> 
 
    <li>Henry V</li> 
 
    <li>Henry VI</li> 
 
    <li>Henry VIII</li> 
 
    <li>Herald</li> 
 
    <li>Hermia</li> 
 
    <li>Hermione</li> 
 
    <li>Hero</li> 
 
    <li>Hippolyta</li> 
 
    <li>Holofernes</li> 
 
    <li>Horatio</li> 
 
    <li>Hortensio</li> 
 
    <li>Hortensius</li> 
 
    <li>Host</li> 
 
    <li>Hostess</li> 
 
    <li>Hostess Quickly</li> 
 
    <li>Hotspur (Henry Percy)</li> 
 
    <li>Hubert de Burgh</li> 
 
    <li>Huntsman</li> 
 
    <li>Hymen</li> 
 
    <li>Iachimo</li> 
 
    <li>Iago</li> 
 
    <li>Imogen</li> 
 
    <li>Iras</li> 
 
    <li>Iris</li> 
 
    <li>Isabella</li> 
 
    <li>Jack Cade</li> 
 
    <li>James Gurney</li> 
 
    <li>Jamy</li> 
 
    <li>Jaquenetta</li> 
 
    <li>Jaques (lord)</li> 
 
    <li>Jaques (son)</li> 
 
    <li>Jessica</li> 
 
    <li>Jeweller</li> 
 
    <li>Joan la Pucelle</li> 
 
    <li>John Holland</li> 
 
    <li>John Morton</li> 
 
    <li>John of Gaunt</li> 
 
    <li>John Talbot</li> 
 
    <li>Joseph</li> 
 
    <li>Julia</li> 
 
    <li>Juliet</li> 
 
    <li>Junius Brutus</li> 
 
    <li>Juno</li> 
 
    <li>Jupiter</li> 
 
    <li>Justice</li> 
 
    <li>Katharine</li> 
 
    <li>Katherina</li> 
 
    <li>Keeper</li> 
 
    <li>King Edward IV (Plantagenet)</li> 
 
    <li>King John</li> 
 
    <li>King Lewis XI</li> 
 
    <li>King of France</li> 
 
    <li>King Phillip</li> 
 
    <li>King Richard II</li> 
 
    <li>Knight</li> 
 
    <li>Knights</li> 
 
    <li>Lady</li> 
 
    <li>Lady Anne</li> 
 
    <li>Lady Capulet</li> 
 
    <li>Lady Faulconbridge</li> 
 
    <li>Lady Macbeth</li> 
 
    <li>Lady Macduff</li> 
 
    <li>Lady Montague</li> 
 
    <li>Lady Northumberland</li> 
 
    <li>Lady Percy</li> 
 
    <li>Laertes</li> 
 
    <li>Lafeu</li> 
 
    <li>Launce</li> 
 
    <li>Launcelot Gobbo</li> 
 
    <li>Lavinia</li> 
 
    <li>Lawyer</li> 
 
    <li>Le Beau</li> 
 
    <li>Lear</li> 
 
    <li>Legate</li> 
 
    <li>Lennox</li> 
 
    <li>Leonardo</li> 
 
    <li>Leonato</li> 
 
    <li>Leonine</li> 
 
    <li>Leontes</li> 
 
    <li>Lepidus</li> 
 
    <li>Lewis</li> 
 
    <li>Lewis the Dauphin</li> 
 
    <li>Lieutenant</li> 
 
    <li>Ligarius</li> 
 
    <li>Lodovico</li> 
 
    <li>Longaville</li> 
 
    <li>Lord</li> 
 
    <li>Lord (Earl) Rivers</li> 
 
    <li>Lord Abergavenny</li> 
 
    <li>Lord Bardolph</li> 
 
    <li>Lord Berkeley</li> 
 
    <li>Lord Bigot</li> 
 
    <li>Lord Chamberlain</li> 
 
    <li>Lord Chancellor</li> 
 
    <li>Lord Chief Justice</li> 
 
    <li>Lord Clifford</li> 
 
    <li>Lord Fitzwater</li> 
 
    <li>Lord Grey</li> 
 
    <li>Lord Hastings</li> 
 
    <li>Lord Lovel</li> 
 
    <li>Lord Marshal</li> 
 
    <li>Lord Mayor of London</li> 
 
    <li>Lord Mowbray</li> 
 
    <li>Lord Ross</li> 
 
    <li>Lord Sands</li> 
 
    <li>Lord Say</li> 
 
    <li>Lord Scales</li> 
 
    <li>Lord Scroop</li> 
 
    <li>Lord Talbot/Earl of Shrewsbury</li> 
 
    <li>Lord Willoughby</li> 
 
    <li>Lords</li> 
 
    <li>Lorenzo</li> 
 
    <li>Luce</li> 
 
    <li>Lucentio</li> 
 
    <li>Lucetta</li> 
 
    <li>Luciana</li> 
 
    <li>Lucilius</li> 
 
    <li>Lucio</li> 
 
    <li>Lucius</li> 
 
    <li>Lucullus</li> 
 
    <li>Lychorida</li> 
 
    <li>Lymoges</li> 
 
    <li>Lysander</li> 
 
    <li>Lysimachus</li> 
 
    <li>Macbeth</li> 
 
    <li>Macduff</li> 
 
    <li>Macmorris</li> 
 
    <li>Malcolm</li> 
 
    <li>Malvolio</li> 
 
    <li>Mamillius</li> 
 
    <li>Man</li> 
 
    <li>Marcellus</li> 
 
    <li>Marcus Andronicus</li> 
 
    <li>Mardian</li> 
 
    <li>Margarelon</li> 
 
    <li>Margaret</li> 
 
    <li>Margaret Jourdain</li> 
 
    <li>Maria</li> 
 
    <li>Mariana</li> 
 
    <li>Marina</li> 
 
    <li>Mariner</li> 
 
    <li>Mariners</li> 
 
    <li>Marquess of Montague</li> 
 
    <li>Marquis of Dorset</li> 
 
    <li>Marshal</li> 
 
    <li>Martius</li> 
 
    <li>Marullus</li> 
 
    <li>Master</li> 
 
    <li>Master-Gunner</li> 
 
    <li>Mayor of Saint Alban's</li> 
 
    <li>Mayor of York</li> 
 
    <li>Mecaenas</li> 
 
    <li>Melun</li> 
 
    <li>Menas</li> 
 
    <li>Menecrates</li> 
 
    <li>Menelaus</li> 
 
    <li>Menenius Agrippa</li> 
 
    <li>Menteith</li> 
 
    <li>Mercade</li> 
 
    <li>Merchant</li> 
 
    <li>Mercutio</li> 
 
    <li>Messala</li> 
 
    <li>Messenger</li> 
 
    <li>Metellus Cimber</li> 
 
    <li>Michael</li> 
 
    <li>Miranda</li> 
 
    <li>Mistress Ford</li> 
 
    <li>Mistress Overdone</li> 
 
    <li>Mistress Page</li> 
 
    <li>Montague</li> 
 
    <li>Montano</li> 
 
    <li>Montjoy</li> 
 
    <li>Mopsa</li> 
 
    <li>Mortimer</li> 
 
    <li>Morton</li> 
 
    <li>Moth</li> 
 
    <li>Mother</li> 
 
    <li>Mustardseed</li> 
 
    <li>Mutius</li> 
 
    <li>Myrmidons</li> 
 
    <li>Nathaniel</li> 
 
    <li>Nerissa</li> 
 
    <li>Nestor</li> 
 
    <li>Nicholas</li> 
 
    <li>Nobleman</li> 
 
    <li>Norwegian Captain</li> 
 
    <li>Nurse</li> 
 
    <li>Nym</li> 
 
    <li>Oberon</li> 
 
    <li>Octavia</li> 
 
    <li>Octavius</li> 
 
    <li>Officer</li> 
 
    <li>Old Athenian</li> 
 
    <li>Old Gobbo</li> 
 
    <li>Old Lady</li> 
 
    <li>Old Man</li> 
 
    <li>Old Shepherd</li> 
 
    <li>Oliver</li> 
 
    <li>Olivia</li> 
 
    <li>Ophelia</li> 
 
    <li>Orlando</li> 
 
    <li>Orsino</li> 
 
    <li>Osric</li> 
 
    <li>Ostler</li> 
 
    <li>Oswald</li> 
 
    <li>Othello</li> 
 
    <li>Outlaws</li> 
 
    <li>Page</li> 
 
    <li>Painter</li> 
 
    <li>Pandar</li> 
 
    <li>Pandarus</li> 
 
    <li>Panthino</li> 
 
    <li>Paris</li> 
 
    <li>Parolles</li> 
 
    <li>Patience</li> 
 
    <li>Patrician</li> 
 
    <li>Patroclus</li> 
 
    <li>Paulina</li> 
 
    <li>Peaseblossom</li> 
 
    <li>Pedant</li> 
 
    <li>Pembroke</li> 
 
    <li>Perdita</li> 
 
    <li>Pericles</li> 
 
    <li>Peter</li> 
 
    <li>Peter Bullcalf</li> 
 
    <li>Peter of Pomfret</li> 
 
    <li>Peto</li> 
 
    <li>Petruchio</li> 
 
    <li>Phebe</li> 
 
    <li>Philario</li> 
 
    <li>Philemon</li> 
 
    <li>Philip</li> 
 
    <li>Philip the Bastard</li> 
 
    <li>Philo</li> 
 
    <li>Philostrate</li> 
 
    <li>Philotus</li> 
 
    <li>Phrynia</li> 
 
    <li>Pinch</li> 
 
    <li>Pindarus</li> 
 
    <li>Pisanio</li> 
 
    <li>Pistol</li> 
 
    <li>Player</li> 
 
    <li>Player King</li> 
 
    <li>Player Queen</li> 
 
    <li>Players</li> 
 
    <li>Poet</li> 
 
    <li>Polixenes</li> 
 
    <li>Polonius</li> 
 
    <li>Pompey</li> 
 
    <li>Popilius</li> 
 
    <li>Porter</li> 
 
    <li>Portia</li> 
 
    <li>Post</li> 
 
    <li>Posthumus Leonatus</li> 
 
    <li>Priam</li> 
 
    <li>Priest</li> 
 
    <li>Prince Edward</li> 
 
    <li>Prince Escalus</li> 
 
    <li>Prince Henry</li> 
 
    <li>Prince Humphrey</li> 
 
    <li>Prince John</li> 
 
    <li>Prince of Arragon</li> 
 
    <li>Prince of Morocco</li> 
 
    <li>Prince Thomas</li> 
 
    <li>Princes</li> 
 
    <li>Princess of France</li> 
 
    <li>Proculeius</li> 
 
    <li>Prospero</li> 
 
    <li>Proteus</li> 
 
    <li>Provost</li> 
 
    <li>Publius</li> 
 
    <li>Puck</li> 
 
    <li>Pursuivant</li> 
 
    <li>Queen</li> 
 
    <li>Queen Elinor</li> 
 
    <li>Queen Elizabeth</li> 
 
    <li>Queen Isabel</li> 
 
    <li>Queen Katharine</li> 
 
    <li>Queen Margaret</li> 
 
    <li>Quince</li> 
 
    <li>Quintus</li> 
 
    <li>Ralph Mouldy</li> 
 
    <li>Rambures</li> 
 
    <li>Regan</li> 
 
    <li>Reignier</li> 
 
    <li>Reynaldo</li> 
 
    <li>Richard III (Duke of Gloucester)</li> 
 
    <li>Richard Plantagenet (Duke of Gloucester)</li> 
 
    <li>Richard Plantagenet the Younger</li> 
 
    <li>Richmond (Henry VII)</li> 
 
    <li>Robert Shallow</li> 
 
    <li>Robin</li> 
 
    <li>Roderigo</li> 
 
    <li>Roman</li> 
 
    <li>Roman Captain</li> 
 
    <li>Romeo</li> 
 
    <li>Rosalind</li> 
 
    <li>Rosaline</li> 
 
    <li>Rosencrantz</li> 
 
    <li>Ross</li> 
 
    <li>Rugby</li> 
 
    <li>Rumour</li> 
 
    <li>Sailor</li> 
 
    <li>Salanio</li> 
 
    <li>Salarino</li> 
 
    <li>Salerio</li> 
 
    <li>Salisbury</li> 
 
    <li>Sampson</li> 
 
    <li>Saturninus</li> 
 
    <li>Scarus</li> 
 
    <li>Scout</li> 
 
    <li>Scribe</li> 
 
    <li>Scrivener</li> 
 
    <li>Sebastian</li> 
 
    <li>Second Apparition</li> 
 
    <li>Second Attendant</li> 
 
    <li>Second Bandit</li> 
 
    <li>Second British Captain</li> 
 
    <li>Second Brother</li> 
 
    <li>Second Capulet</li> 
 
    <li>Second Carrier</li> 
 
    <li>Second Citizen</li> 
 
    <li>Second Clown</li> 
 
    <li>Second Commoner</li> 
 
    <li>Second Conspirator</li> 
 
    <li>Second Drawer</li> 
 
    <li>Second Fisherman</li> 
 
    <li>Second Gaoler</li> 
 
    <li>Second Gentleman</li> 
 
    <li>Second Goth</li> 
 
    <li>Second Groom</li> 
 
    <li>Second Guard</li> 
 
    <li>Second Herald</li> 
 
    <li>Second Huntsman</li> 
 
    <li>Second Keeper</li> 
 
    <li>Second Knight</li> 
 
    <li>Second Lady</li> 
 
    <li>Second Lord</li> 
 
    <li>Second Merchant</li> 
 
    <li>Second Messenger</li> 
 
    <li>Second Murderer</li> 
 
    <li>Second Musician</li> 
 
    <li>Second Neighbour</li> 
 
    <li>Second Officer</li> 
 
    <li>Second Outlaw</li> 
 
    <li>Second Page</li> 
 
    <li>Second Patrician</li> 
 
    <li>Second Petitioner</li> 
 
    <li>Second Pirate</li> 
 
    <li>Second Roman</li> 
 
    <li>Second Sailor</li> 
 
    <li>Second Senator</li> 
 
    <li>Second Servant</li> 
 
    <li>Second Servingman</li> 
 
    <li>Second Serving-Man</li> 
 
    <li>Second Soldier</li> 
 
    <li>Second Stranger</li> 
 
    <li>Second Warder</li> 
 
    <li>Second Watchman</li> 
 
    <li>Second Witch</li> 
 
    <li>Seleucus</li> 
 
    <li>Sempronius</li> 
 
    <li>Senator</li> 
 
    <li>Sentinels</li> 
 
    <li>Sergeant</li> 
 
    <li>Servant</li> 
 
    <li>Servant 1</li> 
 
    <li>Servant 2</li> 
 
    <li>Servant 3</li> 
 
    <li>Servants</li> 
 
    <li>Servilius</li> 
 
    <li>Serving-Men</li> 
 
    <li>Seventh Citizen</li> 
 
    <li>Several Citizens</li> 
 
    <li>Sexton</li> 
 
    <li>Seyton</li> 
 
    <li>Shakespeare</li> 
 
    <li>Shepherd</li> 
 
    <li>Sheriff</li> 
 
    <li>Sheriff of Wiltshire</li> 
 
    <li>Shylock</li> 
 
    <li>Sicilius Leonatus</li> 
 
    <li>Sicinius Velutus</li> 
 
    <li>Silence</li> 
 
    <li>Silius</li> 
 
    <li>Silvia</li> 
 
    <li>Silvius</li> 
 
    <li>Simon Shadow</li> 
 
    <li>Simonides</li> 
 
    <li>Simpcox</li> 
 
    <li>Simpcox's Wife</li> 
 
    <li>Simple</li> 
 
    <li>Sir Andrew Aguecheek</li> 
 
    <li>Sir Anthony Denny</li> 
 
    <li>Sir Henry Guildford</li> 
 
    <li>Sir Hugh Evans</li> 
 
    <li>Sir Humphrey Stafford</li> 
 
    <li>Sir James Tyrrel</li> 
 
    <li>Sir John Colville</li> 
 
    <li>Sir John Fastolfe</li> 
 
    <li>Sir John Mortimer</li> 
 
    <li>Sir John Stanley</li> 
 
    <li>Sir Michael</li> 
 
    <li>Sir Nathaniel</li> 
 
    <li>Sir Nicholas Vaux</li> 
 
    <li>Sir Oliver Martext</li> 
 
    <li>Sir Pierce of Exton</li> 
 
    <li>Sir Richard Ratcliff</li> 
 
    <li>Sir Robert Brakenbury</li> 
 
    <li>Sir Stephen Scroop</li> 
 
    <li>Sir Thomas Erpingham</li> 
 
    <li>Sir Thomas Gargrave</li> 
 
    <li>Sir Thomas Grey</li> 
 
    <li>Sir Thomas Lovell</li> 
 
    <li>Sir Thomas Vaughan</li> 
 
    <li>Sir Toby Belch</li> 
 
    <li>Sir Walter Herbert</li> 
 
    <li>Sir William Catesby</li> 
 
    <li>Sir William Glansdale</li> 
 
    <li>Sir William Lucy</li> 
 
    <li>Sir William Stanley</li> 
 
    <li>Siward</li> 
 
    <li>Sixth Citizen</li> 
 
    <li>Slender</li> 
 
    <li>Smith the Weaver</li> 
 
    <li>Snare</li> 
 
    <li>Snout</li> 
 
    <li>Snug</li> 
 
    <li>Soldier</li> 
 
    <li>Soldiers</li> 
 
    <li>Solinus</li> 
 
    <li>Some Others</li> 
 
    <li>Some Speak</li> 
 
    <li>Son</li> 
 
    <li>Soothsayer</li> 
 
    <li>Speed</li> 
 
    <li>Spirit</li> 
 
    <li>Starveling</li> 
 
    <li>Stephano</li> 
 
    <li>Steward</li> 
 
    <li>Strato</li> 
 
    <li>Surveyor</li> 
 
    <li>Tailor</li> 
 
    <li>Tamora</li> 
 
    <li>Taurus</li> 
 
    <li>Thaisa</li> 
 
    <li>Thaliard</li> 
 
    <li>Thersites</li> 
 
    <li>Theseus</li> 
 
    <li>Thieves</li> 
 
    <li>Third Apparition</li> 
 
    <li>Third Bandit</li> 
 
    <li>Third Citizen</li> 
 
    <li>Third Conspirator</li> 
 
    <li>Third Drawer</li> 
 
    <li>Third Fisherman</li> 
 
    <li>Third Gentleman</li> 
 
    <li>Third Goth</li> 
 
    <li>Third Groom</li> 
 
    <li>Third Guard</li> 
 
    <li>Third Knight</li> 
 
    <li>Third Lord</li> 
 
    <li>Third Messenger</li> 
 
    <li>Third Murderer</li> 
 
    <li>Third Musician</li> 
 
    <li>Third Neighbour</li> 
 
    <li>Third Outlaw</li> 
 
    <li>Third Pirate</li> 
 
    <li>Third Roman</li> 
 
    <li>Third Senator</li> 
 
    <li>Third Servant</li> 
 
    <li>Third Servingman</li> 
 
    <li>Third Serving-Man</li> 
 
    <li>Third Soldier</li> 
 
    <li>Third Stranger</li> 
 
    <li>Third Watchman</li> 
 
    <li>Third Witch</li> 
 
    <li>Thomas Horner</li> 
 
    <li>Thomas Mowbray</li> 
 
    <li>Thomas Rotherham</li> 
 
    <li>Thomas Wart</li> 
 
    <li>Thurio</li> 
 
    <li>Thyreus</li> 
 
    <li>Timandra</li> 
 
    <li>Time</li> 
 
    <li>Timon</li> 
 
    <li>Tintinius</li> 
 
    <li>Titania</li> 
 
    <li>Titus</li> 
 
    <li>Titus Andronicus</li> 
 
    <li>Titus Lartius</li> 
 
    <li>Touchstone</li> 
 
    <li>Townsman</li> 
 
    <li>Tranio</li> 
 
    <li>Travellers</li> 
 
    <li>Travers</li> 
 
    <li>Trebonius</li> 
 
    <li>Tribunes</li> 
 
    <li>Trinculo</li> 
 
    <li>Troilus</li> 
 
    <li>Tubal</li> 
 
    <li>Tullus Aufidius</li> 
 
    <li>Tutor of Rutland</li> 
 
    <li>Tybalt</li> 
 
    <li>Tyrian Sailor</li> 
 
    <li>Ulysses</li> 
 
    <li>Ursula</li> 
 
    <li>Valentine</li> 
 
    <li>Valeria</li> 
 
    <li>Varrius</li> 
 
    <li>Varro</li> 
 
    <li>Vaux</li> 
 
    <li>Ventidius</li> 
 
    <li>Verges</li> 
 
    <li>Vernon</li> 
 
    <li>Vincentio</li> 
 
    <li>Vintner</li> 
 
    <li>Viola</li> 
 
    <li>Virgilia</li> 
 
    <li>Volsce</li> 
 
    <li>Voltemand</li> 
 
    <li>Volumnia</li> 
 
    <li>Volumnius</li> 
 
    <li>Walter Whitmore</li> 
 
    <li>Watch</li> 
 
    <li>Watchman</li> 
 
    <li>Widow</li> 
 
    <li>William</li> 
 
    <li>William Page</li> 
 
    <li>William Stafford</li> 
 
    <li>Williams</li> 
 
    <li>Winchester</li> 
 
    <li>Woodvile</li> 
 
    <li>Young Cato</li> 
 
    <li>Young Clifford</li> 
 
    <li>Young Coriolanus</li> 
 
    <li>Young Lucius</li> 
 
    <li>Young Siward</li> 
 
</ul>

Answer 2

Проверить этот плагин очень похож на то, что вам нужно http://ericsteinborn.com/jquery-listnav/

Answer 3

Если я отслеживаю, вы хотите, чтобы отфильтровать элементы, которые соответствуют букве, что при нажатии кнопки? Если это так, то следующее должно помочь:

При выводе разметки, включают в себя:

<li data-first-character="{strings-first-character}" ...>...</li> 

При выводе списка письмо, включают в себя:

<a data-character="{character}" href="#" ...>...</li> 

Затем в JQuery:

jQuery(function($){ 
    $("[data-character]").on("click", function(){ 
     var character = $(this).data("character"); 

     $("[data-first-character]") 
      .show() 
      .not("[data-first-character=" + character +"]") 
       .hide(); 
    }) 
}); 

Ниже приведено ручку Codepen, которая показывает процесс: http://codepen.io/aklatzke/pen/oXqRmE