Dav*_*ave 1 html javascript css jquery
我有一个“ ul”名单。我将创建一个按字母顺序排列的垂直边栏，当我单击他的一个字母时，将过滤以该字母开头的li名称。
示例：这是用于移动设备，我需要用于网络应用程序。
我没有找到任何插件或代码示例。
更新：说明：
该列表已经排序。我只需要一个字母垂直的侧边栏即可上下滚动列表。
您可以通过执行以下操作轻松实现此目的：
一个简单的代码即可实现：
$("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）上运行：
$("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/>");
}
});
$(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/>");
}
});
});<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&g