動的にclassやidを要素に追加したいときのjQueryメモ。
目次
classの追加はaddClass()
//$(セレクタ).addClass('追加したいclass名');
$(function(){
$('ul').addClass('unordered');
$('li').addClass('item');
}
同じ要素がいくつもある場合にとある要素だけ指定する
このようなhtmlがあったとして、全てにはクラスを追加したくないこともあります。
<h2>jQueryで「id」や「class」を追加する</h2>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
最初と最後だけ、何番目だけという風に特定のものにだけclassを追加したい場合は、セレクタやeq()メソッドを使って割り当てることができます。
cssセレクタを使う
cssでも要素の順番の指定ができるので、それを使います。
//最初だけ
$('li:first').addClass('first_item');
//最後だけ
$('li:last').addClass('last_item');
//n番目だけ
$('li:nth-of-type(3)').addClass('center_item');
//奇数だけ
$('li:odd').addClass('odd_item');
//偶数だけ
$('li:even').addClass('even_item');
eq()メソッドを使う
eq(指定したいセレクタの順番)
でもどの要素か、という指定ができます。
$('li').eq(0).addClass('add_class');
eq()
の引数は「0が1番目」になります。2番目に付けたい場合は「1」、3番目なら「2」を入れます。
addId()というメソッドはないので、idを追加したい場合は別の方法を使います。
連番classを追加する
下記のように連番にしてclassを追加したいとき。
<ul>
<li class="list1">リスト</li>
<li class="list1">リスト</li>
<li class="list2">リスト</li>
</ul>
var i = 1;
$('li').each(function(){
$(this).addClass('list'+i);
i++;
});
変数に開始したい数字を代入。
each
はその要素がある分だけループ。i++
は1ずつ数字が増えます。
属性と属性値を追加する「attr()」
attr()
はidやclassといったhtmlの属性とその値を追加することができるjQueryメソッドです。
属性値はidやclass名。
//$('セレクタ').attr('属性', '属性値');
$(function(){
$('ul').attr('id', 'add_list_wrap');
$('li').attr('class', 'add_list_item');
}
カテゴリー : JavaScript