要素にclassやidを追加する【jQuery】

更新2021/12/07

動的に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

他の記事を見る

カテゴリー

TOPへ