こんにちは、ライターのマサトです！
今回は、jQueryを使う上で基本となる「セレクタ」を使ってHTML要素の「id」を取得したり変更する方法などについて解説いたします！
そこで、この記事では…
- 「id」とは？
- jQueryで「id」を取得しよう！
- 「id」を変更&追加するには？
- 「removeAttr()」で「id」を削除する
- 「id」のセレクタ指定方法！
- 「id」を複数指定するには？
などの基本的な内容から、応用的な使い方に関しても詳しく解説していきます。
この記事で、jQueryの「id」活用技をしっかり学習して自分のスキルアップを目指しましょう！
「id」とは？
それでは、最初に基本的な知識から身につけておきましょう！
まず今回のテーマである「id」ですが、これはHTML要素の属性に付与された「id名」のことを指しています。次のサンプル例を見てください！
<div id="wrap">
<h1 id="title">タイトル</h1>
<p id="text">サンプルテキスト</p>
</div>
この例では、それぞれのHTML要素にid属性が付与されており、例えば「divタグ」のid名は「wrap」と指定されているのが分かりますね。jQueryでは、このような「id名」を指定することで、対象のHTML要素をプログラムで簡単に操作することが可能になるのが特徴です。
また、「id名」は1つのHTML内で重複しない固有の値になるのが前提なので、「クラス名」などと違いダイレクトに任意のHTML要素を操作できるという点も覚えておきましょう！
jQueryで「id」を取得しよう！
ここからは、実際に「id」を取得する練習をしていきましょう！
まずは、次のようなHTMLがあると考えてください。
<div id="wrap">
<p id="text">サンプルテキスト</p>
</div>
「divタグ」の中に「p要素」があるだけのシンプルな構造ですね。
それでは、「divタグ」の「id」を取得してみましょう！
jQueryの基本は「セレクタ ＋ 処理」をセットで記述するため、まず最初に「セレクタ」となる「divタグ」を指定して処理を記述します。
var id = $('div').attr('id');
console.log( id );
実行結果
wrap
この例では、divタグを指定するために「$(‘div’)」と記述し、「id」を取得したいので「attr()」メソッドを利用して実行結果に出力しています。
「attr()」メソッドは、引数に指定したHTML属性を取得することができるので、今回のように「id名」を取得したいようなケースで役に立つわけです。
「id」を変更&追加するには？
次に「id名」を変更したり追加する場合はどうしたら良いでしょうか？
実は、このような場合でも「attr()」メソッドを利用して処理を行うことができるので便利です！ 例えば次のように「id」が指定されていないp要素があるとします。
<p>サンプルテキスト</p>
このp要素に、新しく「text」というid名を指定するには、次のように記述します。
var id = $('p').attr('id', 'text');
console.log( id );
実行結果
[p#text, ......]
この例では、「$(‘p’)」でp要素を指定し、「attr()」の第2引数に付与したい「id名」を記述することでp要素へ追加しているのが分かります。
これとまったく同じ方法で、「id名」を変更することも可能です！
<body>
<p id="text">サンプルテキスト</p>
<script>
var id = $('p').attr('id', 'sample');
console.log( id );
</script>
</body>
実行結果
[p#sample, ......]
この例では、id名に「text」が付与されたp要素に対して、「sample」というid名に変更を行っているのが分かりますね。
このように「attr()」メソッドは、jQueryを扱う上で最も基本となる便利なメソッドなので、何度も繰り返し練習して扱えるようにしておきましょう！
「removeAttr()」で「id」を削除する
今度は、HTML属性に付与されている「id」を削除してみましょう！
この場合は「attr()」ではなく、「removeAttr()」メソッドを利用するということを間違えないようにしてください。次のサンプルを見てください！
<body>
<p id="text">サンプルテキスト</p>
<script>
var id = $('p').removeAttr('id');
console.log( id );
</script>
</body>
実行結果
[p, ......]
この例では、「text」というid名が付与されたp要素に対して、「removeAttr()」メソッドを使うことで対象のidが削除されているのが実行結果からも分かりますね。
通常は「id」属性を削除するようなケースは少ないですが、他にも「class」などさまざまな属性を削除する使い方もあるので覚えておくと良いでしょう！
「id」のセレクタ指定方法！
jQueryの「セレクタ指定」についてはさまざまな方法があるので、ここではHTML要素の「id名」を指定する手法について見ていきましょう！
まず一般的によく使う方法として、次の2種類を見てください。
<body>
<p id="text">サンプルテキスト</p>
<script>
//①直接id名を指定するパターン
$('#text');
//②変数でid名を指定するパターン
var id = '#text';
$(id);
</script>
</body>
①のパターンは最もよく使う方法で、あらかじめ「id名」が分かっている場合は「$(‘#text’)」のように直接記述するのが良いでしょう。
②のパターンも考え方は同じですが、変数に代入していることで動的なプログラム操作を可能にしているのが特徴と言えます。
他にも、ちょっと変わったケースとして次のような指定方法もあります！
<body>
<div id="wrap">
<p id="text1" hidden>テキスト１テキスト１</p>
<p id="text2">テキスト２テキスト２</p>
<p id="text3">テキスト３テキスト３</p>
</div>
<script>
var p = $('p:hidden');
console.log( p );
</script>
</body>
実行結果
[p#text1, ......]
この例では、idを持つp要素がいくつかあり、1つ目のp要素だけ「hidden」属性を付与して画面に表示されないようにしています。
そして、jQueryのセレクタ指定では「$(‘p:hidden’)」と記述していることから、不可視状態のp要素だけが抽出されているのが実行結果からも分かります。（CSSで「display:none」でも同様に取得できます）
もちろん「id名」を指定するのが簡単なのですが、このように柔軟なセレクタ指定ができるという点も一緒に覚えておきましょう！
「id」を複数指定するには？
これまでは、1つの「id」を取得したり指定する方法を学んできました。そこで、種類の違う複数の「id」を指定＆取得するプログラムについて見ていきましょう！
一般的な方法としては、「タグ名[ 属性 ]」という記述を行うことで条件に合致する要素をすべて取得することができるようになります。
次のサンプル例を見てください！
<body>
<div id="wrap">
<p id="text1">テキスト１テキスト１</p>
<p id="text2">テキスト２テキスト２</p>
<p>テキスト３テキスト３</p>
<p id="text4">テキスト４テキスト４</p>
</div>
<script>
var p = $('p[id]');
console.log( p );
</script>
</body>
実行結果
[p#text1, p#text2, p#text4, ......]
この例では、種類の違う複数の「id」が指定されたp要素がいくつか記述されています。
そして、セレクタの指定では「$(‘p[id]’)」と記述することで、「id属性を持つp要素をすべて」という条件に合致しているp要素が複数出力されていますね。（id属性が無い3つ目のp要素は出力されません）
この方法を応用すれば、正規表現のような「前方一致」「後方一致」なども利用できます！
<body>
<div id="wrap">
<p id="text-one">テキスト１テキスト１</p>
<p id="text-two">テキスト２テキスト２</p>
<p id="three">テキスト３テキスト３</p>
</div>
<script>
var p1 = $('p[id^=text]');
var p2 = $('p[id$=e]');
console.log( p1 );
console.log( p2 );
</script>
</body>
実行結果
[p#text-one, p#text-two, ......] [p#text-one, p#three, ......]
「$(‘p[id^=text]’)」と記述することで、id名の先頭に「text」が記述されているp要素だけをすべて取得することが可能です。また、「$(‘p[id$=e]’)」と記述すると、id名の末尾に「e」があるp要素をすべて取得できるわけです。
このように、HTML内にある「id」が付与された複数の要素を簡単に取得できるため、何度も繰り返し練習して使えるようにしておきましょう！
まとめ
今回は、jQueryの基本とも言えるセレクタについて、「id」をテーマに学習しました！
最後に、もう1度だけ重要なポイントを振り返ってみましょう！
- jQueryでは、「セレクタ ＋ 処理」を1セットにしてプログラミングする
- 「attr()」メソッドで、idを取得・変更・追加を行うことができる
- 「id」を削除するには、「removeAttr()」メソッドを使う
- セレクタの指定方法には複数の種類があり、柔軟に対応することができる
上記内容を踏まえて、ぜひ自分のプログラムにも積極的に取り入れいて実践できるようにしましょう！
