IDに連番を付けながら同じ処理を指定回数繰り返す、スマートな書き方を教えてください。

Question

前提・実現したいこと

YouTubeAPIを用いて再生回数などの情報を含めた動画リンクを、複数個Ajaxで出力するコードを作成しています。
何回も同じコードを書くと冗長化してしまうので、短縮化してスマートにさせたく、調べたのですが、上手い書き方がわかりません…。

articleタグのIDに連番(#youtube_01～#youtube_04)を付けながら同じ処理を指定回数(4回)繰り返す
にはどう書くのが良いでしょうか。

該当のソースコード

codepen
↑【APIKEY】を入力で動作します。
下記にも同じコードを記載します。

<article id="youtube_01" class="youtube">
  <a id="js-youtube-link_01" href="" class="youtube-link">
    <div class="youtube-image-wrap">
      <img id="js-youtube-image_01" src="" class="youtube-image">
      <span id="js-youtube-duration_01" class="youtube-duration"></span>
    </div>
    <div class="youtube-content">
      <h1 id="js-youtube-title_01" class="youtube-title"></h1>
      <div class="youtube-detail">
        <span id="js-youtube-channel_01" class="youtube-channel" data-href=""></span> • <span id="js-youtube-views_01"></span> 回視聴 • <span id="js-youtube-date_01"></span>  
      </div>
    </div>
  </a>
</article>

//リクエストパラメーターのセット
const KEY = '【APIKEY】' ;// APIKEY
const ID = 'bjmBJ1Fl0cs' ;// 動画ID
let url = 'https://www.googleapis.com/youtube/v3/videos'; // APIURL
url += '?id=' + ID;
url += '&key=' + KEY;
url += '&part=snippet,contentDetails,statistics,status';

//Ajax通信をする
$(function(){
  $.ajax({
    url: url,
    dataType : 'json'
  }).done(function(data){
    // URL
    $('#js-youtube-link_01').attr('href', `https://www.youtube.com/watch?v=bjmBJ1Fl0cs`);
    
    // サムネイル
    $('#js-youtube-image_01').attr('src', data.items[0].snippet.thumbnails.medium.url);
    
    // タイトル
    $('#js-youtube-title_01').append(data.items[0].snippet.title);
    
    // チャンネル名
    $('#js-youtube-channel_01').append(data.items[0].snippet.channelTitle);
    
    // 再生回数
    $('#js-youtube-views_01').append(data.items[0].statistics.viewCount);
    
    // 再生時間
    let duration = data.items[0].contentDetails.duration;
    let convertDuration = moment.duration(duration).format();
    $('#js-youtube-duration_01').append(convertDuration);
    
    // 投稿日時
    moment.locale('ja');
    let date = data.items[0].snippet.publishedAt;
    let convertDate = moment(date).fromNow();
    $('#js-youtube-date_01').append(convertDate);
    
    
  }).fail(function(data){
    console.log('通信に失敗しました。');
  });
});

試したこと

・上記のコードを単純に4つ複製して「_01」の数字を変える。

・参考にさせていただいたコードは下記になります。
https://codepen.io/hatsushi_kazuya/pen/KKwzYNE

---

初心者で恐縮ですが、よろしくお願いいたします。

Comments

[kei344]

（質問文は編集できます）HTMLも質問文に追記することをお勧めします。

[iunz.el]

アドバイスを頂きありがとうございます。

Answer 1

idに依存しない書き方にすればよいのでは。

$( '.youtube' ).each( function( i ) {
  const $_t = $( this );
  $_t.find( '.youtube-image' ).attr( 'src', 'https://placehold.jp/24/99cc99/339933/350x150.png?text=sample' + i );
} );
```**動くサンプル：**[https://jsfiddle.net/r08cye7p/](https://jsfiddle.net/r08cye7p/)

---

【.each() | jQuery API Documentation】
[https://api.jquery.com/each/](https://api.jquery.com/each/)