На этом шаге мы рассмотрим методы, используемые для добавления сносок.
Следующий шаг состоит в перемещении элементов <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>.
На следующем шаге мы рассмотрим обертывание элементов.