【そのままコピペOK!!】jqueryでidを取得する方法をまとめてみた

18/11/11 17:03:58 19/05/05 15:10:14

jQueryはJavaScriptでありながら、HTMLのタグに対して処理を行うという点ではCSSに近い性質を持っています。そして、idの指定や取得はjQueryの基本とも言えるでしょう。取得を含めて少し応用的なidに対する処理についてもコードを紹介しますが、基本的に難しいことはないかと思います。

なので、ぜひ安心して読み進めてください。各ソースコードに対して文章での解説も行いますが、おそらくだいたいのソースコードはjQueryやJavaScriptをあまり見たことがなくても直感的にわかるレベルかと思います。

ただし直感的にわかるだけだとなんとなくモヤモヤした感じが残ったり、厳密には勘違いしているパターンもあります。なので、直感的な理解にプラスして理論的な解説を付け加えていくようなイメージです。

1 jQueryでid取得する方法
2 idの追加、変更を行う方法
- 2.1 idの追加
- 2.2 idの変更
3 idを削除する方法
4 セレクタ指定でidを取得する方法
5 idを複数取得する方法
6 案件量が豊富なアルマサーチ

jQueryでid取得する方法

jQueryでidを取得する方法ですが、さっそくソースコードで確認していきましょう。

<body>
　　　　<div id="idSample">
　　　　　　　　　<p id="text">テキスト</p>
　　　　</div>
　　　　<script>
　　　　　　　　　var idVariable = $('div').attr('id');
　　　　　　　　　console.log(idVariable );
　　　　</script>
</body>

上記のサンプルコードでは、変数idに取得したidを格納するために、attr()メソッドを使用しています。divタグに対してattr()メソッドを使用し、idを取得しています。最後に取得したidを出力しているため、コンソールには以下のように出力されます。

idSample

pタグではなくdivタグに対してattrメソッドを使用したため、divタグの要素であるidSampleが取得されます。

idの追加、変更を行う方法

次に、idの追加、変更を行う方法を紹介します。

idの追加

<body>
　　　　<p>テキスト</p>

　　　　<script>
　　　　　　　　　var idVariable = $('p').attr('id', 'text');
　　　　　　　　　console.log(idVariable );
　　　　</script>
</body>

上記のソースコードを実行すると、コンソールには以下のように出力されます。

[p#text, ……]

idが指定されていないpタグに対してid名textの設定を行いました。attr()メソッドの第2引数は追加したid名や新しく変更したいid名を記述する仕様になっており、上記の場合idの追加を行いました。

idの変更

<body>
　　　　<p id="text">テキスト</p>

　　　　<script>
　　　　　　　　　var idVariable = $('p').attr('id', 'sample');
　　　　　　　　　console.log(idVariable );
　　　　</script>
</body>

上記のソースコードを実行すると、コンソールには以下のように出力されます。

[p#sample, ……]

もともとpタグのidはtextでしたが、それがsampleに変わりました。ちなみにコンソール出力した際にdivタグの場合はそのまま要素が出力されて、pタグの場合p#が付いていますが、そういう仕様です。

idを削除する方法

idの削除も取得や追加や変更同様難しいものではないのですが、メソッドが変わります。今まではattr()メソッドを使用していましたが、削除の場合はremoveAttr()メソッドを使用します。サンプルコードは以下です。

<body>
　　　　<p id="text">テキスト</p>

　　　　<script>
　　　　　　　　　var idVariable = $('p').removeAttr('id');
　　　　　　　　　console.log(idVariable );
　　　　</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

[p, ……]

もともとpタグにはtextというidが付与されていましたが、removeAttrによってidが削除されました。

セレクタ指定でidを取得する方法

上で説明してきた方法では、タグに対してattrやremoveAttrメソッドを使用することでidに対して処理を行っていました。しかし、メソッドを使用せずに直接セレクタ指定をすることも可能です。具体的には以下のサンプルコードのようになります。

<body>
　　　　<p id="text">テキスト</p>

　　　　<script>
　　　　　　　　　$('#text');

　　　　　　　　　var idVariable = '#text';
　　　　　　　　　$(id);
　　　　</script>
</body>

上記のサンプルコードでは二か所でセレクタ指定でidを取得しています。まず一つ目が「$(‘#text’)」、二つ目が「var id = ‘#text」です。直接記述する方法でも変数に入れる方法でもどちらでも処理としては同じです。取得するだけならどちらでも良いのですが、その後何らかの処理で使用するなら変数に入れた方が汎用性は高いと言えるでしょう。

また、以下のように特定の属性が付いているidのみを指定して取得することも可能です。

<body>
<div id="idSample ">
　　　　<p id="text1" hidden>テキスト１</p>
　　　　<p id="text2">テキスト２</p>
　　　　<p id="text3">テキスト３</p>
</div>
<script>
　　　　　var idVariable = $('p:hidden');
　　　　　console.log(idVariable );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

[p#text1, ……]

pタグのid名ではなく、hiddenという属性に対して要素取得を行いました。pタグ自体は三つありますが、hiddenの属性を持つのはidがtext1のもののみです。そのため、text1というidが取得されました。

idを複数取得する方法

上で解説してきた方法では特定のidのみを取得してきましたが、すべてのid、もしくは条件に合致するidのみを取得する、という方法もあります。

<body>
<div id="idSample ">
　　　　<p id="text1">テキスト１</p>
　　　　<p id="text2">テキスト２</p>
　　　　<p>テキスト３</p>
　　　　<p id="text4">テキスト４</p>
</div>
<script>
　　　　var idVariable = $('p[id]');
　　　　console.log(idVariable );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

[p#text1, p#text2, p#text4, ……]

ソースコードのなかの「$(‘p[id]’)」ですべてのid属性をしていしているため、pタグのなかでidが付与されているすべてのidが取得されました。具体的には、text1、text2、text3の三つです。

次に、条件に合致するidのみを取得することも可能です。

<body>
<div id="idSample ">
　　　　<p id="text-one">テキスト１</p>
　　　　<p id="text-two">テキスト２</p>
　　　　<p id="three">テキスト３</p>
</div>
<script>
　　　　var idVariable 1 = $('p[id^=text]');
　　　　var idVariable 2 = $('p[id$=e]');
　　　　console.log(idVariable 1 );
　　　　console.log(idVariable 2 );
</script>
</body>