jQuery attr(key, fn)

Поиск функций jQuery

Характеристика функции

[Селектор] attr(key, fn)

Раздел "Manipulation"

Метод устанавливающий атрибуты элементов, с вызовом необязательной функции обратного вызова

Параметры

attr(key, fn)

1.0

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'
});

Возможно, Вам будет интересно прочитать статьи о jQuery:

Примеры

Пример:

Установить атрибут 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://slyweb.ru/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://slyweb.ru/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.0

Официальная страница метода - http://api.jquery.com/attr/

Форма для комментариев

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство jQuery 1.4.2

Плагины jQuery UI

Эффекты

Устанавливаем несколько атрибутов

Функция обратного вызова при установке атрибутов

Возможно, Вам будет интересно прочитать статьи о jQuery: