jQuery 「attr」要素の最初のアトリビュート値を取得する

条件にマッチしたDOM要素について、指定したアトリビュートの値を返します。ただし、複数の要素がマッチした場合は、そのうちの「最初の」要素だけが対象になります。マッチするすべての要素を対象にしたい場合は、.each()メソッドによるループを使います。

書式

.attr( アトリビュート名 );

var imgsrc = $('img').attr('src');

サンプル

１、img要素からsrcアトリビュートの値を取得してキャプションとして表示する

 <body>
  <style>
    .sticky {
      background: #aaa;
    }
  </style>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <div class="sticky">
          <p>鮭おにぎり</p>
        </div>
        <div class="sticky">
          <p>コロッケ定食</p>
          <figure><img src="./images/112083_s.jpg" widht="200px" height="100px"></figure>
        </div>
        <div class="sticky">
          <p>梅干しおにぎり</p>
        </div>
        <div class="sticky">
          <p>ラーメン</p>
        </div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
       var imgname = $('img').attr('src');
       $('img').after('<figcaption class="caption">'+imgname +'</figcaption>');
      });
    </script>
</body>

２、フォームのすべてのinput要素から、nameアトリビュートの値を取得する

<body>
  <style>
    .sticky {
      background: #aaa;
    }
  </style>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <form>
          姓<br><input class="form-input" type="text" name="lastname"><br>
          名<br><input class="form-input" type="text" name="firstname"><br>
          メールアドレス<br><input class="form-input" type="text" name="email"><br>
          電話番号<br><input class="form-input" type="text" name="phone"><br>
          <input class="button" type="submit" name="submit" value="送信">
        </form>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
       $('form input:text').each(function(index){
        $('.desc').append('<p>'+$(this).attr('name')+'</p>');
       });
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery