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

【jQuery】選択した場所の「値」取得方法 javascript
この記事は約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)」からではない方が良いですね。

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

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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