javascript - It'is possible to create an alphabetic vertical sidebar in HTMLjQuery? - Stack Overflow

admin管理员组

文章数量:1324231

I have an "ul" list of names. I would to create an alphabetical vertical sidebar that when I click on one of his letter, the li names that begin with that letter were filtered.

Example: this is for mobile, I need it for web application.

I didn't found any plugins or code example.

UPDATE: explanation:

The list is already sorted. I need just an alphabetic vertical sidebar used for scroll the list up and down.

I have an "ul" list of names. I would to create an alphabetical vertical sidebar that when I click on one of his letter, the li names that begin with that letter were filtered.

Example: this is for mobile, I need it for web application.

I didn't found any plugins or code example.

UPDATE: explanation:

The list is already sorted. I need just an alphabetic vertical sidebar used for scroll the list up and down.

• javascript
• jquery
• html
• css

Share Follow edited Jul 8, 2015 at 13:42 Dave asked Jul 8, 2015 at 13:27 DaveDave 1,50255 gold badges3131 silver badges4949 bronze badges 3

• Add your HTML/JS codes. – Anwar Commented Jul 8, 2015 at 13:35
• possible duplicate of How may I sort a list alphabetically using jQuery? – Palu Macil Commented Jul 8, 2015 at 13:36
• 1 I don't think that OP wants to sort the list, but to create an alphabetical index to use as dropdown – Alvaro Montoro Commented Jul 8, 2015 at 13:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can achieve this easily by doing something like this:

• Traverse the list.
• If the first character of the list element is different from the previous list element:
  • Add a unique id to that list element.
  • Add a link to the alphabetical index (pointing to the unique id).

A simple code to achieve this:

$("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/>");
    }
});

And you can see it working on this demo (or on this 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./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>

Checkout this plugin it is very similar to what you need http://ericsteinborn./jquery-listnav/

If I'm following, you want it to filter out the items that match the letter that you press? If so, the following should help:

When outputting your markup, include:

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

When outputting your letter list, include:

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

Then, in jQuery:

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

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

Here is a Codepen pen that shows the process: http://codepen.io/aklatzke/pen/oXqRmE

本文标签： javascriptIt39is possible to create an alphabetic vertical sidebar in HTMLjQueryStack Overflow