LoginSignup
5

More than 5 years have passed since last update.

JS初心者の私が「ん!?」ってなったとこ2:.attr()で取れるもの

Last updated at Posted at 2015-01-23

なんの目的もなくJavaScriptを学び始めて3日。ウェブでいろいろ調べながら、お遊びしていて詰まったところを、備忘録として書いていきます。

(ほんとに初心者なので、)間違っている部分がありましたら、是非ともご指摘下さい。m(_ _)m

ソース

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="utf-8">
  <title>jQuery Practice</title>
  </head>
  <body>
    <p>
      <a href="http://google.com">Google</a>
      <a href="http://yahoo.co.jp">yahooJP</a>
    </p>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="jqsample.js"></script>
  </body>
</html>
jqsample.js
$(function() {
  console.log($('a').attr('href'));
})

Google Chrome JavaScript Console

http://google.com

うんうん。なるほど、なるほど。

ん!?

えっと、yahooさんは出てこないの?

解決

調べてみると、js STUDIOの「.attr( name )」の項目に、

要素が複数マッチしている場合、最初の要素の属性のみを取得します。 各要素の属性値を取得したい場合は、.each()や.map()を使用してください。

と書いてある。なるほど、最初の要素だけ出してるんだね!
じゃあ、.eachで書いてみよう。

jqsample.js
$(function() {
  $.each($('a'), function() {
    console.log($(this).attr('href'));
  })
})

Google Chrome JavaScript Console

http://google.com
http://yahoo.co.jp

めでたしめでたし。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5