На этом шаге мы рассмотрим способ изменения атрибутов.
Манипулировать некоторыми атрибутами совсем непросто без помощи библиотеки jQuery. Кроме того, jQuery позволяет одновременно изменять значения нескольких атрибутов, подобно тому как она позволяет одновременно работать с несколькими свойствами CSS при помощи метода .css().
Например, мы легко можем одновременно изменить значения атрибутов id, rel и title у всех ссылок. Для начала приведем фрагмент разметки HTML:
<div id="container">
<h1 id="f-title">Дубровский</h1>
<div id="f-author">А.С.Пушкин</div>
<h2>ТОМ I</h2>
<h3 id="f-subtitle">Роман не был закончен и издан после смерти писателя.</h3>
<div id="excerpt">Год издания: 1842</div>
<div class="chapter">
<p class="square">
Несколько лет тому назад в одном из своих поместий жил старинный
русской барин,
<a href="http://ru.wikipedia.org/wiki/%D0%94%D1%83%D0%B1%D1%80%D0%BE%
D0%B2%D1%81%D0%BA%D0%B8%D0%B9_(%D1%80%D0%BE%D0%BC%D0%B0%D0%BD)">
Кирила Петрович Троекуров</a>. Его богатство, знатный род и связи
давали ему большой вес в губерниях, где находилось его имение. Соседи рады
были угождать малейшим его прихотям; губернские чиновники трепетали при его
имени; Кирила Петрович принимал знаки подобострастия как надлежащую дань;
дом его всегда был полон гостями, готовыми тешить его барскую праздность,
разделяя шумные, а иногда и буйные его увеселения. Никто не дерзал
отказываться от его приглашения, или в известные дни не являться с должным
почтением в село Покровское. В домашнем быту Кирила Петрович выказывал все
пороки человека необразованного. Избалованный всем, что только окружало его,
он привык давать полную волю всем порывам пылкого своего нрава и всем затеям
довольно ограниченного ума. Не смотря на необыкновенную силу физических
способностей, он раза два в неделю страдал от обжорства и каждый вечер бывал
навеселе. В одном из флигелей его дома жили 16 горничных, занимаясь
рукоделиями, свойственными их полу. Окны во флигеле были загорожены
деревянною решеткою; двери запирались замками, от коих ключи хранились у
Кирила Петровича. Молодые затворницы, в положеные часы, сходили в сад и
прогуливались под надзором двух старух. От времени до времени Кирила
Петрович выдавал некоторых из них за муж и новые поступали на их место. С
крестьянами и дворовыми обходился он строго и своенравно; не смотря на то,
они были ему преданы: они тщеславились богатством и славою своего господина
и в свою очередь позволяли себе многое в отношении к их соседам, надеясь на
его сильное покровительство.</p>
<p class="nobility hexagon">
Всегдашние занятия Троекурова состояли в разъездах около пространных
его владений, одолжительных пирах, и в
<a href="http://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B4%D0%B2%D0%B5
%D0%B6%D1%8C%D1%8F_%D0%BF%D0%BE%D1%82%D0%B5%D1%85%D0%B0">
проказах</a>, ежедневно при том
изобретаемых и жертвою коих бывал обыкновенно какой-нибудь новый знакомец;
хотя и старинные приятели не всегда их избегали за исключением одного Андрея
Гавриловича Дубровского. Сей Дубровский, отставной поручик гвардии, был ему
ближайшим соседом и владел семидесятью душами. Троекуров, надменный в
сношениях с людьми самого высшего звания, уважал Дубровского, не смотря на
его смиренное состояние. Некогда были они товарищами по службе и Троекуров
знал по опыту нетерпеливость и решительность его характера. Обстоятельства
разлучил и их надолго. Дубровский с расстроенным состоянием принужден был
выдти в отставку и поселиться в остальной своей деревне. Кирила Петрович,
узнав о том, предлагал ему свое покровительство, но Дубровский благодарил
его и остался беден и независим. Спустя несколько лет Троекуров, отставной
генерал-аншеф, приехал в свое поместие, они свидились и обрадовались друг
другу. С тех пор они каждый день бывали вместе, и Кирила Петрович, отроду не
удостоивавший никого своим посещением, заезжал запросто в домишка своего
старого товарища. Будучи ровесниками, рожденные в одном сословии,
воспитанные одинаково, они сходствовали отчасти и в характерах и в
наклонностях. В некоторых отношениях и судьба их была одинакова: оба
женились по любви, оба скоро овдовели, у обоих оставалось по ребенку. - Сын
Дубровского воспитывался в Петербурге, дочь Кирила Петровича росла в глазах
родителя, и Троекуров часто говаривал Дубровскому: "Слушай, брат, Андрей
Гаврилович: коли в твоем Володьке будет путь, так отдам за него Машу; даром
что он гол как сокол". Андрей Гаврилович качал головой и отвечал
обыкновенно: "Нет, Кирила Петрович: мой Володька не жених Марии Кириловне.
Бедному дворянину, каков он, лучше жениться на бедной дворяночке, да быть
главою в доме, чем сделаться приказчиком избалованной бабенки".</p>
<p>
Все завидовали <span class="pull-quote">согласию, царствующему между
надменным Троекуровым и бедным его соседом и <span class="drop">
удивлялись</span> смелости сего последнего, когда он за столом
у <strong>Кирила Петровича</strong> прямо высказывал свое
мнение</span>, не заботясь о том,
противуречило ли оно мнениям хозяина. Некоторые пытались было ему подражать
и выдти из пределов должного повиновения, но Кирила Петрович так их пугнул,
что навсегда отбил у них охоту к таковым
<a href="http://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BA%D1%83%D1%88%D0
%B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B5%D1%81%D1%82%D1%83%D0
%BF%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5"> покушениям</a>, и Дубровский
один остался вне общего закона. Нечаянный случай все расстроил и переменил.
</p>
<!-- продолжение кода разметки -->
</div>
</div>
Теперь можно выполнить итерации по всем ссылкам, находящимся внутри элемента <div class="chapter">, и поочередно изменить значения атрибутов. Если нам необходимо всего лишь установить некоторое общее значение атрибута для всех ссылок, мы можем реализовать это с помощью одной строки программного кода в обработчике $(document).ready():
$(document).ready(function() {
$('div.chapter a').attr({'rel': 'external'});
});
Мы можем использовать такой подход, потому что нам требуется установить новое значение атрибута rel для всех ссылок. Однако нередко атрибуты, которые мы добавляем или изменяем, должны иметь различные значения во всех элементах. Например, в любом документе все значения атрибута id должны быть уникальными, если мы хотим, чтобы наш программный код JavaScript вел себя предсказуемо. Чтобы для каждой ссылки установить уникальное значение атрибута id, мы откажемся от однострочного решения в пользу метода .each(), предоставляемого библиотекой jQuery.
$(document).ready(function() {
$('div.chapter a').each(function(index) {
$(this).attr({ 'rel' : 'external',
'id' : 'wikilink-' + index
});
});
});
Метод .each(), который действует как явный итератор, фактически является более удобной формой цикла for. Он может использоваться, когда программный код, который должен выполнять обработку каждого элемента в наборе элементов, соответствующих селектору, оказывается слишком сложным для синтаксической конструкции, выполняющей неявные итерации. В нашей ситуации метод .each() передает анонимной функции индекс, который мы можем добавить к каждому значению атрибута id. Аргумент index действует как счетчик, он принимает значения, начиная с 0 и увеличиваясь на 1 для каждой следующей ссылки. В результате выражение 'wikilink-' + index для первой ссылки вернет значение wikilink-0, для второй - wikilink-1, и так далее.
Примечание. В действительности мы могли бы использовать здесь синтаксис неявных итераций, потому что метод .attr() может принимать функцию во втором аргументе подобно методу .filter() (подробности по адресу: http://docs.jquery.com/Attributes/attr#keyfn). Однако использовать метод .each(), на наш взгляд, удобнее.
Мы задействуем атрибут title, чтобы предложить пользователям поближе познакомиться со связанным понятием в Википедии. Все ссылки в представленном фрагменте HTML указывают на сайт Википедии. Однако, вероятно, было бы лучше сделать селектор более конкретным, то есть отбирающим только те ссылки, которые содержат слово wikipedia в значении атрибута href, на тот случай, если позднее нам придется добавить в разметку HTML ссылки, не связанные с Википедией:
$(document).ready(function() {
$('div.chapter a[href*=wikipedia]').each( function(index) {
$thisLink = $(this);
$thisLink.attr({
'rel': 'external',
'id': 'wikilink-' + index,
'title': 'Более подробно о \"' + $thisLink.text() + '\" в Википедии'
});
});
});
На рисунке 1 приведен результат просмотра документа в браузере:
Рис.1. Результат просмотра созданного документа в браузере
Обратите внимание, что здесь мы сохраняем значение $(this) в переменной с именем $thisLink, делается это по той простой причине, что данное значение используется более одного раза.
После установки значений всех трех атрибутов разметка HTML, например, первой ссылки будет выглядеть так:
<a href="http://ru.wikipedia.org/wiki/%D0%94%D1%83%D0%B1%D1%80%D0%BE%D0%B2 %D1%81%D0%BA%D0%B8%D0%B9_(%D1%80%D0%BE%D0%BC%D0%B0%D0%BD)" rel="external" id="wikilink-0" title="Более подробно о \"Кирила Петрович Троекуров\" в Википедии">Кирила Петрович Троекуров</a>
На следующем шаге мы снова поговорим о функции $().
