会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

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

jQuery(ジェイクエリ)
この記事は約3分で読めます。

テーブルなどの要素にclassやidを追加したいと思った時に使える方法です。

attr(properties)

キーと値の組み合わせからなるハッシュオブジェクトを引数に渡し、全ての要素に複数の属性を同時に設定する。

http://semooh.jp/jquery/api/attributes/attr/properties/
<table>
<tbody>
    <tr><td>北海道</td><td>札幌市</td></tr>
    <tr><td>青森県</td><td>青森市</td></tr>
    <tr><td>岩手県</td><td>盛岡市</td></tr>
    <tr><td>宮城県</td><td>仙台市</td></tr>
    <tr><td>秋田県</td><td>秋田市</td></tr>

</tbody>
</table>
北海道札幌市
青森県青森市
岩手県盛岡市
宮城県仙台市
秋田県秋田市

このような感じでidとclassが追加できます。

$(function(){
    $('table').attr('id', 'prefectures');
    $('tbody').attr('class', 'prefectures-tbody');
}
<table>
<tbody>
    <tr><td>北海道</td><td>札幌市</td></tr>
    <tr><td>青森県</td><td>青森市</td></tr>
    <tr><td>岩手県</td><td>盛岡市</td></tr>
    <tr><td>宮城県</td><td>仙台市</td></tr>
    <tr><td>秋田県</td><td>秋田市</td></tr>
</tbody>
</table>

北海道札幌市
青森県青森市
岩手県盛岡市
宮城県仙台市
秋田県秋田市

最初の要素だけ追加したい場合

最初の要素だけ追加したい場合は「:first」を追加します。要素にclassを追加する場合は「addClass」でも可能です。

$('tbody:first').addClass('prefectures-tbody');

これで、最初に出現した「tbody」のみ、クラス名を追加できます。

まとめ

「attr」や「addClass」を使うと、要素にクラス名を追加することができます。

ご参考下さい😀

タイトルとURLをコピーしました