Навигация по страницам с помощью 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" , а если быть точнее там такая конструкция: Код:
[prev-link]Назад[/prev-link] <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 ведь??? |
Часовой пояс GMT +3, время: 10:58. |