Навигация по страницам с помощью jQuery
 

Всем привет!
В общем есть такой HTML код который нужно получить частично через jQuery:

<div class="pagination">
  <a class="prev-button" href="#"><i class="icon-angle-left"></i></a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a class="current" href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a>...</a>
  <a href="#">11</a>
  <a href="#">12</a>
  <a href="#">13</a>
  <a class="next-button" href="#"><i class="icon-angle-right"></i></a>
</div>

Проблема в том что в CMS DataLife Engine в файле шаблона navigation.tpl вместо тега "a" выводится тег "span" , а если быть точнее там такая конструкция:
Которая будет выводить такой HTML код:

<div class="pagination">
  <a href="/">Назад</a>
  <a href="/">1</a>
  <span>2</span>
  <a href="/page/3/">3</a>
  <a href="/page/3/">Вперёд</a>
</div>

Где

<span>2</span>

это активный пункт навигации, который выводится кодом движка.
Я хочу получить конструкцию которую указал в самом начале через jQuery, не меняя исходные PHP коды движка.
Ещё один нюанс: вместо "Назад" и "Вперёд" будут выводится иконки со стрелочками влево и вправо соответственно.
Я попробовал сам решить проблему, но так как я слаб в jQuery не получается допилить, а именно: не получается заменить тег "span" тегом "a" которому ещё нужно присвоить класс ".current" когда пункт активен и удалить этот класс когда пункт не активен.
Вот что у меня получилось:

jQuery(document).ready(function($) {
  $('.pagination').each(function() {
    $('.icon-angle-left').parent().addClass('prev-button');
	$('.icon-angle-right').parent().addClass('next-button');
	/*
	 * И вот тут косяк...
	 * Вместо тега span нужен тег a и проверить, правильно ли я написал функцию.
	 */
	if ($('.pagination span').last()) {
	  $('.pagination span').first().addClass('current');
	}
  });
});

Прошу помочь реализовать указанную в начале HTML конструкцию с помощью jQuery, не меняя исходный PHP код движка.
Спасибо!

Если я вас правильно понял, код будет примерно такой:

var content = $('.pagination').find('span').text();			//запомним номер пункта
$('.pagination').find('span').appendChild(document.createElement('a'));		//создадим 'a' и добавим в span
$('span > a')
		.attr('href','#')			//доводим до рабочего состояния
		.text(content)				//всталяем номер пункта
		.addClass('current');		//т.к. мы работаем со span, то по логике этот пункт полюбому активен
									//соответственно если пункт неактивен он неокажется в span
$('span > a').unwrap();		//заменяем span на a

А насчёт назад вперед...просто добавьте в нужные ссылки тег img примерно вот так:

$('a').appendChild(document.createElement('img'));
$('a > img').attr('scr','myimage.jpg');

Спасибо за ответ!
Вроде да, всё правильно, сейчас попробую, единственное не совсем уверен что у Вас полностью заменился тег 'span' на тег 'a' , но я возможно ошибаюсь, не ас в jQuery
P.S.
Да, и я хочу чтоб это работало только в этом месте(не затрагивало другой код) правильно я понимаю что всё это нужно завернуть в:

jQuery(document).ready(function($) {
  $('.pagination').each(function() {
Здесь Ваш код
  });
});

Спасибо!

развеять все сомнения...
http://api.jquery.com/unwrap/
Да, можно завернуть и так....

Прилагаю скрины
 

Прилагаю скрины что получается:
1. Что должно получится

2. Что получается

3. Скрин исходного кода

Тег "span" не поменялся...

А можно увидеть код того, что получилось на скрине?

Который мне нужно получить?
Вам HTML код? Если Вы имеете ввиду реализацию на jQuery то в исходнике всё сделано на HTML и CSS , а мне надо приделать это к DLE и чтоб не менять PHP исходники.

Извиняюсь, в предыдущем коде была одна ошибка. Выкладываю окончательный вариант(прогнал у себя, всё работает):

var content = $('.pagination').find('span').text();         //запомним номер пункта
	$('.pagination').find('span').empty();
	$('.pagination').find('span').append(document.createElement('a'));     //создадим 'a' и добавим в span
	$('span > a')
	        .attr('href','#')           //доводим до рабочего состояния
	        .text(content)              //всталяем номер пункта
	        .addClass('current');       //т.к. мы работаем со span, то по логике этот пункт полюбому активен
	                                    //соответственно если пункт неактивен он неокажется в span
	$('span > a').unwrap();

Одно НО - для работы метода unwrap() необходима jquery 1.4+ если и в этом случае несработает, то либо дело в CMS, либо я тут не помошник...

Большое Вам человеческое спасибо!!!
Насчёт версии jQuery в DLE на сегодняшний момент если мне память не изменяет по моему 1.9 , так что всё ок.
Сейчас протестирую как освобожусь..., у меня тут ещё пару мыслей появилось как это сделать, помучаюсь... :)

А тут у Вас не опечатка?
Вместо scr надо src ведь???