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