Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

なんの目的もなく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

めでたしめでたし。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away