【jQuery】選択した場所の「値」取得方法

【jQuery】選択した場所の「値」取得方法
この記事は約2分で読めます。

選択された値を取得してアクションを起こす方法のご紹介です。
選択した要素の取得にはjQueryの「.index(this)」を利用します。

選択した値を取得

【jQuery】
var list = $("li").index(this);
【DEMO】

あなたの好きなパソコンメーカーは?

  • ウィンドウズ
  • グーグル
  • マック
  • シャオミ
  • デル
  • オッポ
  • エイサス

私が好きなメーカーは番目のです!

項目を選択すると、項目のリスト番号とテキストが表示される。
jQueryでクリックされた値を取得するには、「$(this)」を利用します。
「$(this)」はクリックされた場所の値を返してくれるので、取得した値を変数へ入れて、様々な場所で活用出来ます。
次に、クリックされた箇所値の子要素を変更します。

$(this)の子要素を変更

【jQuery】
  var list = $("li").index(this);
  var list_name = $("li").eq(list).children("");
【DEMO】

あなたの好きな街と理由は?

  • 吉祥寺:アムリタ食堂があるから
  • 高円寺:中国のアンティークがあるから
  • 下北沢:ドロシーがあるから
  • 中目黒:寄生虫博物館があるから
  • 恵比寿:どんくがあるから
  • 代官山:なんかチョーおしゃれだから
  • 仙 川:島忠が最高

私が好きな街は番目の。理由は「」です。

値の子要素を変更する場合は、「children()」または、「find()」で取得可能です。
「children()」は、子要素(直下の要素)しか取得出来ませんが、「find()」は子孫要素(親要素より下、全ての要素)が取得可能で、「find()」は利用範囲が広いので頻繁に利用します。

子孫要素以外にも、直上の親要素や先祖要素。
先祖要素の中の別divの孫要素の取得や、もうなんでも取得出来ますが、そこまで行くともう「$(this)」からではない方が良いですね。

今日は、選択した値の取得方法についてでした。

javascriptjQueryサイト制作

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

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