Как автоматически сгенерировать алфавитный набор быстрых ссылок для & lt; dl & gt; Словарь терминов?

Я решил это, но это заняло некоторое время. В итоге я изучил Javascript / JQuery!

Вот JSFiddle из того, что я написал: http://jsfiddle.net/w7uo0q40/10/
Я добавил еще несколько терминов в глоссарий, чтобы вы могли видеть, что гиперссылки действительно что-то делают, когда вы нажимаете на них. Буквенные ссылки в верхней части, содержащие записи, указывают на первую запись с этой буквой, тогда как буквы в верхней части, в которых нет записей, выглядят по-разному и не ссылаются ни на что.

Вот сопровождающий код (скопированный из JSFiddle):

Javascript / JQuery

var terms = $("dl.glossary dt").sort();

var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var i = 0; i < letters.length; i++) {
var nextChar = letters.charAt(i);

// Need to find first of each letter
var foundOne = -999;
for (var j = 0; j < terms.length; j++) {
var termj = terms[j].innerText;
var termJJ = termj.toUpperCase();
if (termJJ.charAt(0) == nextChar) {
foundOne = j;
break;
}
}

// Create links and anchors based on whether something was found
if (foundOne == -999) {

// Create a new letterLink (with class "entriesAbsent")
newLetterLink = "<span class=\"letterLinkSpan\"><a class=\"letterLink entriesAbsent\">" + nextChar + "</a></span>";

} else {

// Create a new letterLink (with class "entriesPresent")
newLetterLink = "<span class=\"letterLinkSpan\"><a class=\"letterLink entriesPresent\" href=\"#" + nextChar + "\">" + nextChar + "</a></span>";

// Create an anchor for the letterLink BEFORE the first glossary term starting with that letter
$("<a class=\"letterAnchor\" name=\"" + nextChar + "\">").insertBefore(terms[foundOne]);

}

// Either way, add the letterLink to the list of letterLinks
$("div#quicklinks").append(newLetterLink);
}

HTML

<h2>Glossary:</h2>

<h3>Links:</h3>
<div id="quicklinks"></div>

<h3>Entries:</h3>
<dl class="glossary"> <a name="Bobcat">
<dt>Bobcat</dt>
<dd>A medium-sized, furry mammal that can eat children.</dd>
<a name="Cat">
<dt>Cat</dt>
<dd>A small, furry mammal that meows.</dd>
<a name="Dog">
<dt>Dog</dt>
<dd>A small, furry mammal that barks.</dd>
<a name="Fish">
<dt>Fish</dt>
<dd>A scaly aquatic animal that swims in water.</dd>
<a name="Flamingo">
<dt>Flamingo</dt>
<dd>A pink bird.</dd>
<a name="Gnat">
<dt>Gnat</dt>
<dd>A small flying insect.</dd>
<a name="Llama">
<dt>Llama</dt>
<dd>A shaggy-haired beast of burden with a long neck.</dd>
<a name="Mouse">
<dt>Mouse</dt>
<dd>A tiny mammal.</dd>
<a name="Quail">
<dt>Quail</dt>
<dd>A small bird.</dd>
<a name="Rhino">
<dt>Rhino</dt>
<dd>A scaly mammal.</dd>
<a name="Swan">
<dt>Swan</dt>
<dd>A white bird.</dd>
<a name="Toucan">
<dt>Toucan</dt>
<dd>A colorful bird.</dd>
<a name="Whale">
<dt>Whale</dt>
<dd>A huge aquatic mammal.</dd>
<a name="Yak">
<dt>Yak</dt>
<dd>A shaggy-haired beast of burden.</dd>
<a name="Zebra">
<dt>Zebra</dt>
<dd>Sort of a horse with white/black stripes.</dd>

</dl>

CSS

span.letterLinkSpan {
display: inline-block;
}
span.letterLinkSpan>a.letterLink {
display: inline-block;
width: 1.1em;
text-align: center;
padding: 0.2em;
font-size: medium;
color: #000000;
background-color: #BBCCFF;
}

span.letterLinkSpan>a.letterLink.entriesPresent {
font-weight: bold;
}
span.letterLinkSpan>a.letterLink.entriesAbsent {
font-weight: normal;
color: #FFEEEE;
}
span.letterLinkSpan>a.letterLink:hover {
background-color: #DDDDFF;
}

Это не очень элегантный код, но, надеюсь, это кому-нибудь поможет. Ура!