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

動的にHTMLのclassやidを要素に追加したいときのjQueryメモです。

classの追加は addClass()

クラスを追加する場合は addClass() というメソッドを使用します。引数に付けたいクラス名を記述します。ドット「.」は不要で、クラス名だけにしてください。

$(セレクタ).addClass('追加したいclass名');

$(function(){
  $('ul').addClass('unordered');
  $('li').addClass('item');
}

$(function(){
  $('ul').addClass('unordered');
  $('li').addClass('item');
}

同じ要素がいくつもある場合に特定の要素を指定して追加

以下ようなhtmlの記述があったとして、<li> タグにクラスを付けたいものの、全てにはクラスを追加したくないこともあります。

<h2>jQueryで「id」や「class」を追加する</h2>
<ul>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
  <li>リスト</li>
</ul>

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

//最初だけ
$('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');

$('li').eq(0).addClass('add_class');

eq() の引数は「0が1番目」になります。2番目に付けたい場合は「1」、3番目なら「2」を入れます。

連番classを追加する

下記のように連番にしてclassを追加したいときはその要素を順番に取得し、数字を変化させてclass名を付けていく方法があります。

<ul>
  <li class="list1">リスト</li>
  <li class="list2">リスト</li>
  <li class="list3">リスト</li>
</ul>

<ul>
  <li class="list1">リスト</li>
  <li class="list2">リスト</li>
  <li class="list3">リスト</li>
</ul>

var i = 1;
$('li').each(function(){
  $(this).addClass('list'+i);
  i++;
});

var i = 1;
$('li').each(function(){
  $(this).addClass('list'+i);
  i++;
});

i の変数に開始したい数字を代入します。each はその要素がある分だけループさせるもので、 i++ は1ずつ数字を増やす記述です。

classの削除は removeClass()

クラスを削除する場合は removeClass() というメソッドを使用します。例えばハンバーガーメニュなどクリックしたら表示・非表示を切り替えたい要素などによく使用します。

$(セレクタ).removeClass('削除したいclass名');

$(function(){
  $('.nav_button').on('click', function(){
    $(this).toggleClass('active');
    if($(this).hasClass('active')) {
      $('.nav_content').addClass('on');
    } else {
      $('.nav_content').removeClass('on');
    }
  });
});

$(function(){
  $('.nav_button').on('click', function(){
    $(this).toggleClass('active');
    if($(this).hasClass('active')) {
      $('.nav_content').addClass('on');
    } else {
      $('.nav_content').removeClass('on');
    }
  });
});

idを追加する場合は「attr()」を使用

addId() というメソッドはなく、idを追加したい場合は attr() メソッドを使います。

attr() はidやclassといったhtmlの属性とその値を追加することができるjQueryメソッドです。属性値にidやclass名を記述します。

$('セレクタ').attr('属性', '属性値');

$(function(){
  $('ul').attr('id', 'add_list_wrap');
  $('li').attr('class', 'add_list_item');
}

$(function(){
  $('ul').attr('id', 'add_list_wrap');
  $('li').attr('class', 'add_list_item');
}

idを削除する場合

idを削除したい場合は attr() で値を空にする方法と removeAttr('id') を使用する方法があります。

$('#id_sample').attr('id', '');
$('#id_sample').removeAttr('id');

$('#id_sample').attr('id', '');
$('#id_sample').removeAttr('id');

$('#id_sample').attr('id', ''); で削除した場合に出力されるHTML。

<div id="">id_sample</div>

$('#id_sample').removeAttr('id'); で削除した場合に出力されるHTML。

<div>id_sample</div>

2つの方法をご紹介しましたが、attr() を使うより removeAttr('id') で消してしまった方がいいのかなとは思います。
クラスの場合は複数設定することも多いため、class属性自体は削除しない方がいい場合がありますが、idは基本的に一つのみ設定するものなので、id属性そのものを削除しても問題ないでしょう。

removeAttr() はクラスに対しても使用できます。

$('.class_sample').removeAttr('class');

$('.class_sample').removeAttr('class');