js STUDIO

.addClass()

.addClass( name ) 1.0追加

戻り値:jQuery

classを追加します。

引数 説明
name 要素に追加するclass名。スペース区切りで複数指定することが可能です。

.addClass( function(index, currentClass) ) 1.4追加

戻り値:jQuery

追加するclass名を関数を使って指定します。

引数 説明
function(index, currentClass)

class名を決定するための関数を指定します。追加したいclass名が戻り値になるようにします。

index
マッチした要素が何番目にマッチした要素なのかを取得することが出来ます。
currentClass
現時点で割り当てられているclass名

サンプルコード

スペース区切りで複数のclass名を追加します。

$("p").addClass("myClass yourClass");

別のclass名と入れ替えたい場合には、下記のようにremoveClassと併せて使用します。 

//全てのp要素からmyClassとnoClassを削除し、yourClassを追加
$("p").removeClass("myClass noClass").addClass("yourClass");

バージョン1.4から追加された関数指定によって、class名を割り当てる例です。 例えば、li要素が5つ存在する場合、最後のli要素が対象となり、"item-4"のclass名が 割り当てられます。 

$("ul li:last").addClass(function(index) {
  //indexは0から始まるため、5番目の要素であればindexは「4」
  return "item-" + index; //"item-4"
});

デモ

マッチした要素に"selected"のclass名を追加します。

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

  <p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>

<script>
  $("p:last").addClass("selected");
</script>

</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM