На этом шаге мы рассмотрим формирование ссылок.
Теперь мы готовы пометить все места в тексте, откуда извлекаются сноски, и пронумеровать их:
$(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('')
);
});
});
Здесь мы начинаем с того же селектора, который использовался в упрощенном примере работы со сносками, но к нему мы присоединили вызов метода .each().
Внутри метода .each() мы начинаем работу с вызова функции $(this), которая последовательно возвращает каждую сноску, и присоединяем к ней метод .before().
Результатом объединения элементов массива в круглых скобках внутри метода .before() является ссылка, оформленная в виде верхнего индекса, которая будет вставлена перед каждым элементом <span> со ссылкой. Первая ссылка, к примеру, после вставки в дерево DOM будет выглядеть, как показано ниже:
<а href="#foot-note-1" id="context-1" class="context"><sup>1</sup></a>
На первый взгляд синтаксис может показаться незнакомым, поэтому потратим минуту и разберемся с ним. Внутри круглых скобок метода .before() мы сначала помещаем пару квадратных скобок ([]), которые представляют литерал массива. За каждым элементом массива следует запятая (за исключением последнего элемента, что очень важно). Для большей удобочитаемости мы поместили каждый элемент в отдельной строке. После сборки массива мы преобразуем его в строку с помощью метода join() языка JavaScript. В качестве аргумента этому методу передается пустая строка, представленная парой апострофов, поскольку мы не хотим, чтобы при выводе массива в виде разметки HTML между его элементами присутствовали еще какие-либо символы.
Обратите внимание, что всюду используется выражение index+1. Так как счет итераций начинается с 0, мы добавляем 1, чтобы установить атрибут href первой ссылки в значение #foot-note-1, атрибут id в значение #context-1 и фактический текст ссылки в значение 1. Атрибут href особенно важен, потому что его значение должно в точности совпадать со значением атрибута id ссылки (за исключением символа #, конечно).
Безусловно, для получения того же результата можно использовать не операцию объединения элементов массива, а операцию конкатенации строк:
.before('<a href="#foot-note-' + (index+1) +
' " id="context-' + (index+1) +
' " class="context"><sup>' +
(index+1) + '</sup></a>');
Однако в данном случае реализация на основе массива, на наш взгляд, проще в сопровождении.
Теперь наши метки, ссылающиеся на сноски, выглядят, как показано на рисунке 1.
Рис.1. Вид меток, ссылающихся на соответствующие им сноски
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим добавление сносок.
