【jQuery】aタグのhref属性の値を取得したい #jQuery

2018/10/24 追記：改めて見ると日本語おかしい箇所があったので修正
2019/01/29 追記：改めて見るとなんか恥ずかしい箇所があったので修正
2023/01/21 追記：文章の修正

準備

下記サンプルを見てください。
今回はこのhrefの中身("top.html"等の文字列)を取得しようと思います。

a.href の話になってますが
select.option 等にも流用できます。

何の意味もないdivタグは後々使います。

index.html

<html>
<head>
<!-- CDNとか -->
</head>
<body>
<!-- 略 -->
  <div>
    <a href="top.html">TOP</a>
    <a href="content.html">CONTENT</a>
    <a href="company.html">COMPANY</a>
    <a href="other.html">OTHER</a>
  </div>
<!-- 略 -->
</body>
</html>

jQueryでどうにかしよう

シンプルにjQueryでどうにかしてみましょう。
getElementById,getElementsByTagName,getAttributeというメソッドでなんとかできそうです。

それぞれの特徴を簡単に紹介します。

getElementById(id)
- 引数idに一致したelementオブジェクトを返します。
- 引数idに指定した要素にクリックやマウスオーバー等を行いたいときに便利。
getElementsByTagName(tag)
- 操作するtagを指定できる。
- getElementByIdと組み合わせれば要素を絞り込める。
getAttribute(name)
- nameは取得したい値を持った"属性"の名前
- hrefは"属性"であるため利用可能。その他にはhiddenやsrcがあります。

文で表現しても分かりにくいので実際のコードを載せます。

実装する

前準備として先述のソースの無意味な<div>にidを付けます。

<div id="destinationPage">

とでもしときましょう。好きな名前にしてください。

あとは先ほどの三つのメソッドを応用してhrefを取得するだけです。

aタグですのでクリックでイベント発火させます。
マウスオーバーにしてみても面白いかもしれませんね。

最後に、ちゃんと取得できているかアラートで出力してみます。

app.js

$('a').on('click', function(){
  let destinationPage = 
document.getElemetnById('destinationPage').getElementsByTagName('a')[0].getAttribute('href');

 alert("遷移先は" + destinationPage + "です。");
});

実際に動かしてみます。

いい感じですね。

しかし、この状態では他のリンクをクリックしても#top.htmlしか取れません。

原因は先ほどのコードのこの部分です。
getElementsByTagName('a')[0]

見て分かるようにgetElementsByTagNameに[0]を指定しているからid=destinasionPage下のaタグの0番目のhref属性だけしか取得できないんですよね。

対策として、[0]の部分を変数にして可変にしてみましょう。

クリックした要素の順番を取得しよう

[0]とかいてあるからにはきっと配列で言うインデックスを表しているのでそれを利用しましょう。
きっとcontent.htmlやcompany.htmlは[1]、[2]を指定すれば取得できるはずです。

ここで登場するのが.index()メソッドです。
インデックス番号を返してくれます。

let index = $('a').index(this)

でクリックしたaタグのインデックス番号をindexに返してくれる...はずなのですが、またもやうまくいきません。

原因としては、四つあるaタグがグループ化されてないからです。
.index()は命令されたはいいものの、どこのaタグのどのインデックス番号を返せばいいのか混乱してるわけです。

であれば、「3年2組の出席番号18番」のように特定してあげれば動いてくれるはずです。
その為にも先ほどのaタグにクラスを付けてこれらがひと塊だよと示してあげましょう。

index.html

<!-- 略 -->
  <div id="destinationPage">
    <a class="group" href="top.html">TOP</a>
    <a class="group" href="content.html">CONTENT</a>
    <a class="group" href="company.html">COMPANY</a>
    <a class="group" href="other.html">OTHER</a>
  </div>
<!-- 略 -->

indexの方も少し変えます。

let index = $('a.group').index(this)

これでindexは取ることができたので
getElementsByTagName('a')[0]を
↓
getElementsByTagName('a')[index]という風にしてあげれば考えてる動作はすべて叶います。

以上までのことを反映した最終的なコードが下記となります。

index.html

<!-- 略 -->
  <div id="destinationPage">
    <a class="group" href="top.html">TOP</a>
    <a class="group" href="content.html">CONTENT</a>
    <a class="group" href="company.html">COMPANY</a>
    <a class="group" href="other.html">OTHER</a>
  </div>
<!-- 略 -->

app.js

$('a.group').on('click', function(){
  let index = $('a.group').index(this)
  let destinationPage = 
    document.getElemetnById('destinationPage')
      .getElementsByTagName('a')[index]
      .getAttribute('href');

 alert("遷移先は" + destinationPage + "です。");
});

エビデンスも載せておきます(背景のクリック後の色が分かりにくくてすいません)

おわりに

分かりやすく書いたつもりでしたがどうでしたでしょうか。
冒頭の方でも触れていたようにselect.optionでも似たようなことができます。

昨今ではもっとモダンな書き方ができると思いますが、それでも参考になれば幸いです。

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