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

テーブルなどの要素に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>

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

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

[rml_read_more]

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

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

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

まとめ

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

ご参考下さい😀