На этом шаге мы рассмотрим методы, используемые для обертывания элементов.
Основным методом библиотеки jQuery, используемым для обертывания одних элементов другими, является метод с подходящим названием .wrap(). С учетом требования обернуть каждую сноску $(this) тегами <li></li> окончательная реализация оформления сносок будет выглядеть, как показано ниже:
$(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>)' )
.wrap('<li id="foot-note-' + (index+1) + '"></li>');
});
});
Теперь атрибуту id каждого элемента присваивается значение атрибута href соответствующего маркера в тексте. В результате мы получаем набор пронумерованных сносок со ссылками на текст в них, показанный на рисунке 1.
Рис.1. Набор пронумерованных сносок со ссылками на текст
Полный текст этого примера можно взять здесь.Конечно, порядковые номера перед сносками можно было бы вставлять точно так же, как это делалось в параграфах, но наличие осмысленной разметки, динамически создаваемой средствами JavaScript, приносит гораздо более глубокое удовлетворение.
Примечание. В библиотеке jQuery существуют и другие методы, предназначенные для обертывания элементов: .wrapAll() и .wrapInner(). За дополнительной информацией обращайтесь по адресам: http://docs.jquery.com/Manipulation/wrapAll и http://docs.jquery.com/Manipulation/wrapInner.
На следующем шаге мы рассмотрим копирование элементов.
