選択された値を取得してアクションを起こす方法のご紹介です。
選択した要素の取得には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)」からではない方が良いですね。
今日は、選択した値の取得方法についてでした。
コメント