JavaScript

jQueryで特定のクラスを持った複数要素のidを抽出する方法

海と夕やけ

 

あなた
jQueryで特定のクラスを持った複数要素を取得して、その要素ごとのidを抽出したいです。

どうしたらいいですか?

 

今回はこんな疑問に答えていきます。

 

特定のクラスを持った複数要素を取得して、その要素ごとのidを抽出する方法

 

今回は、以下のようなHTML要素を想定します。

 

<div class="row">
    <span class="message-ok" id="message-id-1">メッセージ1</span>
    <span class="message-ok" id="message-id-2">メッセージ2</span>
</div>

 

上記から、「message-ok」というクラスを持った要素を取得しつつ、idの値を取得していきます。

セレクタとeachを使いましょう

 

結論から話すと、セレクタとeachを使えばOKです。

コードは次のとおりです。

 

$( ".message-ok" ).each( function (){
     console.log($( this ).attr( "id" ));
} );

 

取り出した要素を配列化したいなら、以下のようにしましょう。

idの数値だけ取り出してみました。

 

let idArr = [];
$( ".message-ok" ).each( function ()
{
    idArr.push( $( this ).attr( "id" ).substr( 11 ) );//メッセージのidを取得。11は「message-id-」の文字数。
} );

目印を付けた要素のデータを操作するのに便利です

 

設計上、classで目印的な意味を持たせることは結構あります。

そしてidに、固有の値(idなど)をもたせることも多いです。

 

そうなると「特定の目印を持ったグループから固有値を取り出して操作したい」というケースも割とあります。

その場合に、先程のコードは役に立つと思います。

 

今回は以上です。

ありがとうございました。

 

プログラミングスクールに関する情報

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位:テックキャンプ  【転職成功率 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-JavaScript

© 2021 エンジニアてんし君ブログ