2017.11.29
jQuery APIリファレンス .addClass()
説明
一致する各要素に、指定されたCSSクラスを追加します。
シグネチャ
-
.addClass( className )
追加version 1.0 引数:型 className:String -
.addClass( function )
追加version 1.4 引数:型 function:Function( Integer index, String currentClassName ) => String）
サンプル1
一致する要素に “selected”クラスを追加します。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html>
サンプル2
.addClass()に関数を渡して、既に “red”クラスを持つdivに “green”クラスを追加します
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
div {
background: white;
}
.red {
background: red;
}
.red.green {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div>This div should be white</div>
<div class="red">This div will be green because it now has the "green" and "red" classes.
It would be red if the addClass function failed.</div>
<div>This div should be white</div>
<p>There are zero green divs</p>
<script>
$( "div" ).addClass(function( index, currentClass ) {
var addedClass;
if ( currentClass === "red" ) {
addedClass = "green";
$( "p" ).text( "There is one green div" );
}
return addedClass;
});
</script>
</body>
</html>
