Как автоматически сгенерировать алфавитный набор быстрых ссылок для глоссария <dl>?

Question

У меня есть относительно большой глоссарий терминов на моей веб-странице, которые организованы как список описания <dl>,

Для минимального рабочего примера, давайте предположим, что выглядит примерно так (за исключением того, что в нем будет 50-100 записей):

<dl class="glossary">

    <dt>Bobcat</dt>
    <dd>A medium-sized, furry mammal that can eat children.</dd>

    <dt>Cat</dt>
    <dd>A small, furry mammal that meows.</dd>

    <dt>Dog</dt>
    <dd>A small, furry mammal that barks.</dd>

    <dt>Fish</dt>
    <dd>A scaly aquatic animal that swims in water.</dd>

</dl>

Давайте предположим, что все термины правильно расположены в алфавитном порядке в пределах <dl> регион через <dt> тег.

Я хотел бы автоматически генерировать последовательность гиперссылок ABC в верхней части экрана ("A", "B", "C", ..., "Z"), которые переходят к первой записи, начинающейся с этой буквы.Бонусные баллы, если есть способ включить все буквы, но стилизовать буквы по-разному, если есть против, если нет записей глоссария, соответствующих этой букве.

То, что я собираюсь сделать, должно выглядеть примерно так, как на следующем веб-сайте, где алфавитные быстрые ссылки в верхней части каждой страницы указывают пользователю на эти места в глоссарии: http://www.g2conline.org/g2c/glossary/a/, Ключевое отличие состоит в том, что я хочу, чтобы быстрые ссылки указывали на якоря на одной странице, а не разделяли глоссарий на отдельные страницы для каждой буквы алфавита, как это делает этот веб-сайт.

Вот JSFiddle того, как должен выглядеть и вести себя результат. Вы можете заметить, что я включил CSS и некоторые классы, чтобы некоторые ссылки выглядели по-разному, в соответствии с моим "бонусным" требованием выше. Я также добавил дополнительный HTML для создания ссылок.

Я хотел бы, чтобы что-то подобное происходило автоматически / динамически - возможно, с помощью сценария JQuery? Я хотел бы сохранить это как можно более легким и избегать использования языков программирования, кроме HTML, PHP или Javascript/JQuery.

Спасибо!

Answer 1

Я решил это, но это заняло некоторое время. В итоге я изучил 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;
}

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