【jQuery】属性の取得や設定をするメソッドの一覧と使い方

jQueryの属性を操作するメソッド

こちらではjQueryのメソッドのうち、属性の取得や設定をするメソッドについて解説しています。

属性の取得や設定をするメソッド

jQueryの属性の取得や設定をするメソッドを表にまとめました。

メソッド 解説
attr(name) nameで指定した属性の値を取得
attr(name, value) nameで指定した属性の値をvalueにする
attr(map) オブジェクト形式で属性を設定する
attr(name, function) 属性の値をコールバック関数で設定する
removeAttr(name) nameで指定した属性を削除する

attr(name) 属性の値を取得する

nameで指定した属性の値を取得するメソッドです。

選択した要素のうち、一番最初の要素の属性を取得します。

attr(name)の使い方

<a href="https://aaa.com/">○○</a>
<a href="https://bbb.com/">△△</a>
<a href="https://ccc.com/">□□</a>

上記のHTMLにおいて

var url = $('a').attr('href')

とするとurlhttps://aaa.com/となります。

attr(name, value) 属性の値を設定する

nameで指定した属性の値をvalueに設定するメソッドです。

attr(name, value)の使い方

<a href="https://aaa.com/">○○</a>

上記のHTMLにおいて

$('a').attr('target', '_blank');

とすると

<a href="https://aaa.com/" target="_blank">○○</a>

となります。

attr(map) 複数の属性を設定する

{name:valu, name:value, …}のオブジェクト形式で引数を渡すことで、複数の属性を設定するメソッドです。

attr(map)の使い方

<a href="https://aaa.com/">○○</a>

上記のHTMLにおいて

$('a').attr({target:'_blank', rel:'nofollow'});
もしくは
$('a').attr({'target':'_blank', 'rel':'nofollow'});

とすると

<a href="https://aaa.com/" target="_blank" rel="nofollow">○○</a>

となります。

attr(name, function) 関数で属性を設定する

nameで指定した属性の値を関数(function)で設定するメソッドです。

functionには2つの引数を渡すことができます。1つ目はインデックス番号、2つ目は現在の属性の値です。

attr(name, function)の使い方

<img src="1.jpg" alt="画像">
<img src="2.jpg" alt="画像">
<img src="3.jpg" alt="画像">

上記のHTMLにおいて

$('img').attr('alt', function(index, value){
	return value + index;
});

とすると

<img src="1.jpg" alt="画像0">
<img src="2.jpg" alt="画像1">
<img src="3.jpg" alt="画像2">

となります。

もう1つ例を挙げると、

<a href="https://aaa.com/" target="_blank">○○</a>
<a href="https://bbb.com/" target="_blank">△△</a>
<a href="https://ccc.com/">□□</a>

上記のHTMLにおいて

$('a').attr('rel', function(index, value){
	if( this.target == "_blank" ) return 'noopener';
});

とすると

<a href="https://aaa.com/" target="_blank" rel="noopener">○○</a>
<a href="https://bbb.com/" target="_blank" rel="noopener">△△</a>
<a href="https://ccc.com/">□□</a>

となります。

removeAttr(name) 属性を削除する

nameで指定した属性を削除します。

removeAttr(name)の使い方

<img src="1.jpg" alt="画像0">
<img src="2.jpg" alt="画像1">
<img src="3.jpg" alt="画像2">

上記のHTMLにおいて

$('img').removeAttr('alt');

とすると

<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">

となります。

[prism]