Верстка с помощью jQuery

Да-да, я ничего не перепутал, я собираюсь вам показать, как верстать с помощью jQuery (javascript). Зачем и как? Читайте ниже!

Зачем верстать с помощью jQuery?

Чаще всего jQuery (в общем случае javascript, но удобнее пользоваться именно JQuery поэтому здесь и далее я буду писать о нем) применяют для верстки тогда, когда нельзя (или нерационально) влиять на исходный код. Например, добавить элемент. Рассмотрим конкретный пример.

Есть виджет для вордпресс под названием «Recent Posts Extended» - для вывода последних (и не только) записей. Он очень прост и удобен в работе, даже гибок. Но в моей практике всегда имеют место быть такие ситуации, когда даже гибкости самого гибкого плагина/виджета не хватает. Так и в этом случае.

Смотрите, виджет формирует такой код: список записей, в которых есть картинка, название записи, цитата (несколько слов из записи), дата, а также дополнительная ссылка на «читать дальше».

С помощью CSS в данном случае мы можем сделать много: например, поменять элементы местами. Но в коде вывода не предусмотрена вставка дополнительных элементов. А что если мы хотим, к примеру, добавить горизонтальную черту (<hr>) перед заголовком у каждой выводимой записи? Такой настройки нет. А вот с помощью jQuery вопрос решается просто.

Как верстать с помощью jQuery?

Очень просто: в основном используем две функции: prepend() и append(). Первая вставляет текст или html код в начало нужного элемента, вторая – в конец. В нашем случае используем первую функцию в поле виджета «HTML или текст после вывода последних записей»:

<script>
jQuery(".rpwe-title > a").prepend('<hr class="chert-zagol">');
</script>

И вот мы видим необходимую черту:



Примечание. Есть и еще один способ решения данной задачи. Он заключается в том, чтобы залезть в исходный код виджета и добавить в него для вывода еще один элемент – эту самую пресловутую черту. Может быть, он даже более правильный. Но это более долгий путь, а иногда все приходится верстать быстро.