Разберем на примере. Есть вот примерно такая HTML конструкция
<p>Пожалуйста, ознакомьтесь с <a href="/files/lenobl_delivery.pdf">тарифами</a>.</p>
Задача: надо определить тип файла с JQuery в ссылке, и подставить иконку, что бы визуально было понятно, что это за ссылка.
Используем для этого стандартный JQuery, предпочитаю версию 1.8.3. Код довольно простой. Логика такова: перебираем все ссылки в блоке, и вставляем строчный элемент <i class="b_icons"></i> с необоходимым классом перед ссылкой.
jQ('.b_article-full a').each(function () { if (/.*\.pdf/.test(jQ(this).attr('href'))) { jQ(this).before('<i class="b_icons pdf"></i> '); } if (/.*\.zip/.test(jQ(this).attr('href'))) { jQ(this).before('<i class="b_icons zip"></i> '); } if (/.*\.doc/.test(jQ(this).attr('href'))) { jQ(this).before('<i class="b_icons doc"></i> '); } if (/.*\.docx/.test(jQ(this).attr('href'))) { jQ(this).before('<i class="b_icons doc"></i> '); } });
Далее немного чудо CSS кода:
.b_icons { display : inline-block; width : 16px; height : 16px; position : relative; top : 3px } .b_icons.pdf { background : url(путь к иконке) } .b_icons.doc { background : url(путь к иконке) } .b_icons.zip { background : url(путь к иконке) }
Вот так просто можно определить тип файла с JQuery в документе.
Оказываем услуги по поддержке, сопровождению и продвижению сайта, которые включают в себя: дизайн, верстку, программирование, контекстная реклама и таргентинг, продвижение, работа с контентом.
Если у вас возникли какие-либо вопросы, предложения, либо вы желаете оформить заявку на заказ какой-либо услуги, заполните форму и отправьте нам сообщение.