[Селектор] attr(key, fn)
Раздел "Manipulation"
Метод устанавливающий атрибуты элементов, с вызовом необязательной функции обратного вызова
key: название устанавливаемого атрибута
function(index,attr): функция возвращающая значение для установки в качестве атрибута индекс и текущий элемент
function (index,attr)
{
index; // позиция jQuery объекта;
attr; // значение прежнего атрибута;
this; // текущий элемент
}
Данный метод позволит Вам установить различное число атрибутов для любых элементов. В функции обратного вызова Вы можете выплнить дополнительные задачи с удаляемым или замещаемым атрибутом
С помощью данного метода Вы можете устанавливать как единичный атрибут так и несколько одновременно. Ниже в примере есть соответствующие примеры множественного установления атрибутов. Вот один из вариантов:
Устанавливаем несколько атрибутов
$('#greatphoto').attr({
alt: 'Атрибут alt',
title: 'Атрибут title'
});
Внимание! При указании атрибута "класс" вы должны всегда использовать кавычки! Internet Explorer не допускает изменять атрибут type для полей формы и button!
Функция обратного вызова при установке атрибутов
$('#greatphoto').attr('title', function(i, val) {
return val + ' - Новый title'
});
Пример:
Установить атрибут id для всех элементов div, основанном на их позиции на странице.
"jQuery"
$("div").attr("id", function (arr) {
return "div-id" + arr;
})
.each(function () {
$("span", this).html("(ID = '" + this.id + "')");
});
"HTML"
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
"CSS"
div { color:blue; }
span { color:red; }
b { font-weight:bolder; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").attr("id", function (arr) {
return "div-id" + arr;
})
.each(function () {
$("span", this).html("(ID = '" + this.id + "')");
});
});
</script>
</head>
<body class="iframe">
<div>Zero-th <span></span></div>
<div>First <span></span></div>
<div>Second <span></span></div>
</body>
</html>
<style>
div { color:blue; }
span { color:red; }
b { font-weight:bolder; }
</style>
Пример:
Установить src атрибут из title атрибута для всех элементов img. Изображения находятся в images/.
"jQuery"
$("img").attr("src", function() {
return "images/" + this.title;
});
"HTML"
<img title="ptica1.gif"/>
<img title="ptica2.gif"/>
<img title="ptica3.gif"/>
"CSS"
div { color:blue; }
span { color:red; }
b { font-weight:bolder; }
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css"
rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img").attr("src", function() {
return "images/" + this.title;
});
});
</script>
</head>
<body class="iframe">
<img title="ptica1.gif"/>
<img title="ptica2.gif"/>
<img title="ptica3.gif"/>
</body>
</html>
<style>
div { color:blue; }
span { color:red; }
b { font-weight:bolder; }
</style>
Версия jQuery 1.4.2
Документ создан 2010-08-21
