Шаг 80.
Библиотека jQuery.
Манипулирование деревом DOM. Добавление сносок

    На этом шаге мы рассмотрим методы, используемые для добавления сносок.

    Следующий шаг состоит в перемещении элементов <span class="footnote">, как это делалось в упрощенном примере. Однако на этот раз элементы будут помещаться во вновь созданный элемент <ol id="notes">. Здесь мы будем использовать метод .appendTo(), что обеспечит надлежащий порядок следования, при котором каждая последующая сноска будет добавляться в конец элемента:

$(document).ready(function() {
  $('<ol id="notes"></ol>').insertAfter('div.chapter');
  $('span.footnote').each(function(index) {
    $(this)
      .before(
        ['<a href="#foot-note-',
          index+1,
          '" id="context-',
          index+1,
          '" class="context">',
            '<sup>' + (index+1) + '</sup>',
        '</a>'
        ].join('')
      )
      .appendTo('#notes');
  });
});

    Важно помнить, что метод .appendTo() по-прежнему объединяется в цепочку с вызовом функции $(this), таким образом мы предписываем библиотеке jQuery: добавить элемент span со сноской в конец элемента со значением атрибута id, равным 'notes'.

    В конец каждой перемещенной сноски мы добавляем ссылку, указывающую на номер в тексте:

$(document).ready(function() {
  $('<ol id="notes"></ol>').insertAfter('div.chapter');
  $('span.footnote').each(function(index) {
    $(this)
      .before(
        ['<a href="#foot-note-',
          index+1,
          '" id="context-',
          index+1,
          '" class="context">',
            '<sup>' + (index+1) + '</sup>',
        '</a>'
        ].join('')
      )
      .appendTo('#notes')
      .append( ' (<a href="#context-' + (index+1) + '">контекст</a>)' );
  });
});

    Обратите внимание, что значение атрибута href ссылается на значение атрибута id соответствующей ссылки в тексте. На рисунке 1 можно видеть сноски с добавленными к ним ссылками.

Рис.1. Сноски с добавленными ссылками

Полный текст этого примера можно взять здесь.

    Однако в сносках по-прежнему отсутствуют их порядковые номера. Хотя мы и поместили сноски внутрь элемента <ol>, каждую из них нужно обернуть в отдельный элемент <li>.

    На следующем шаге мы рассмотрим обертывание элементов.




Предыдущий шаг Содержание Следующий шаг