ファイル名が連番な画像を表示する

大量の画像を表示したいのですが、ファイルは連番にします。
jQueryで連番を追加できるらしいと思ったのですができませんでした。
目標はこんな感じにしたいのです。

HTML
1<table>
2  <tr>
3    <td><a href="https://username.github.io/site/img/1.jpg"><img src="https://username.github.io/site/img/1.jpg" /></a></td>
4    <td><a href="https://username.github.io/site/img/2.jpg"><img src="https://username.github.io/site/img/2.jpg" /></a></td>
5    <td><a href="https://username.github.io/site/img/3.jpg"><img src="https://username.github.io/site/img/3.jpg" /></a></td>
6  </tr>
7  <tr>
8    <td><a href="https://username.github.io/site/img/4.jpg"><img src="https://username.github.io/site/img/4.jpg" /></a></td>
9    <td><a href="https://username.github.io/site/img/5.jpg"><img src="https://username.github.io/site/img/5.jpg" /></a></td>
10    <td><a href="https://username.github.io/site/img/6.jpg"><img src="https://username.github.io/site/img/6.jpg" /></a></td>
11  </tr>
12・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
13</table>

サイトを皆が書いて見たのがこれなのですが、これではtdの繰り返しができません。
3つづつ（仮）でやって見たいのですが、教えていただけると幸いです。

JavaScript
1$(function(){
2  $('a').each(function(i){
3      $(this)href('https://username.github.io/site/img/'+ (i+1) + '.jpg');
4  });
5  $('img').each(function(i){
6      $(this)src('https://username.github.io/site/img/'+ (i+1) + '.jpg');
7  });
8});

#追記
お二人ありがとうございます。
参考にさせていただき、JavaScriptで作詞して見たコードが以下になります。
こちらで無事表示できました

JavaScript
1for (i=1; i<=13; i++) {
2document.write('<div class="gallery-img"><a href="https://test.github.io/img/' + i + '.jpg"><img src="https://test.github.io/site/test/' + i + '.jpg"></a></p>');
3        }

ですがこのあと新たな問題が生じたので再度質問させていただいています。
もしわかるようでしたら教えてください。

JavaScriptで作成した画像をCSSでトリミングできない - https://teratail.com/questions/62827

行動規範の内容に同意します

回答4件

jQueryでの回答は既にありますが、javascriptタグもついているのでjavascriptバージョンをおいておきます。参考になることができればうれしいです。

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11    </style>
12</head>
13<body>
14<table>
15    <tbody>
16    <tr>
17        <td>
18            <a><img src=""></a>
19        </td>
20        <td>
21            <a><img src=""></a>
22        </td>
23        <td>
24            <a><img src=""></a>
25        </td>
26    </tr>
27    <tr>
28        <td>
29            <a><img src=""></a>
30        </td>
31        <td>
32            <a><img src=""></a>
33        </td>
34        <td>
35            <a><img src=""></a>
36        </td>
37        <td>
38            <a><img src=""></a>
39        </td>
40    </tr>
41    </tbody>
42</table>
43<script>
44    window.addEventListener("DOMContentLoaded", function () {
45        let anchor = document.getElementsByTagName("a");
46        let image = document.getElementsByTagName("img");
47        let anchorList = Array.prototype.slice.call(anchor);
48        let imageList = Array.prototype.slice.call(image);
49        anchorList.forEach(function (val, index) {
50            anchor[index].href = "https://placehold.jp/ff4747/ffffff/150x150.png?text=" + (index + 1);
51        });
52        imageList.forEach(function (val, index) {
53            image[index].src = "https://placehold.jp/ff4747/ffffff/150x150.png?text=" + (index + 1)
54        }, false);
55    });
56</script>
57</body>
58</html>

追記

innerHTMLを使うと以下のように。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<script>
9    document.addEventListener("DOMContentLoaded", function () {
10        for (i = 1; i <= 13; i++) {
11            document.body.innerHTML += '<div class="gallery-img"><a href="https://test.github.io/img/' + i + '.jpg"><img src="https://test.github.io/site/test/' + i + '.jpg"></a></div>';
12        }
13    }, false);
14</script>
15</body>
16</html>

insertAdjacentHTMLを使うと以下のように行えると思います。beforeendを指定することでbodyの一番下の部分に挿入することができます。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<script>
9    document.addEventListener("DOMContentLoaded", function () {
10        for (i = 1; i <= 13; i++) {
11            document.body.insertAdjacentHTML('beforeend', '<div class="gallery-img"><a href="https://test.github.io/img/' + i + '.jpg"><img src="https://test.github.io/site/test/' + i + '.jpg"></a></div>');
12        }
13    }, false);
14</script>
15</body>
16</html>

投稿2017/01/20 14:58

編集2017/01/21 20:54

s8_chu

総合スコア14731

2001Y

2017/01/21 15:56

お返事を忘れていましたが、教えていただきありがとうございました。

2001Y

2017/01/21 16:23

ありがとうございます。 innerHTMLと insertAdjacentHTMLの違いについて軽くで良いので教えていただけると嬉しいです。

s8_chu

2017/01/21 16:54

innerHTMLはHTMLの置換を行い、insertAdjacentHTMLはHTMLの追加を行うものです。そのため、innerHTMLよりinsertAdjacentHTMLのほうが高速です。

2001Y

2017/01/21 17:08

なるほど！！わかりやすい説明をありがとうございます。 insertAdjacentHTMLを使わせていただきます。

2001Y

2017/01/21 17:09

ベストアンサーにしたかったのですが取り消し方法がわからず、変えられないので申し訳ないです。

行動規範の内容に同意します

こう。

JavaScript
1$( function() {
2  $( 'a' ).each( function( i ) {
3      $( this ).prop( 'href', 'https://placehold.jp/24/99cc99/339933/350x150.png?text='+ ( i + 1 ) + '.jpg' );
4  } );
5  $('img' ).each( function( i ) {
6      $( this ).prop( 'src', 'https://placehold.jp/24/99cc99/339933/150x50.png?text='+ ( i + 1 ) + '.jpg' );
7  } );
8} );
9```**動くサンプル：**[https://jsfiddle.net/s6be2LL6/](https://jsfiddle.net/s6be2LL6/)
10
11---
12
13**追記：**
14
15```JavaScript
16$( function() {
17	var html = '', img_count = 10, i = 0;
18	while( i < img_count ) {
19		++i;
20		html += '<a href="https://placehold.jp/24/99cc99/339933/350x150.png?text='+ i + '.jpg">';
21		html += '<img src="https://placehold.jp/24/cc9999/993333/150x50.png?text='+ i + '.jpg">';
22		html += '</a>';
23	}
24	$( 'body' ).html( html );
25} );
26```**動くサンプル：**[https://jsfiddle.net/s6be2LL6/2/](https://jsfiddle.net/s6be2LL6/2/)

投稿2017/01/20 09:16

編集2017/01/20 17:18

kei344

総合スコア69407

2001Y

2017/01/21 15:56

お返事を忘れていましたが、教えていただきありがとうございました。

行動規範の内容に同意します

HTML
1<body>
2    <div id="contents-main">
3      <h1>ギャラリー</h1>
4      <div id="lightgallery">
5        <script>
6        document.addEventListener("DOMContentLoaded", function () {
7            for (i = 1; i <= 13; i++) {
8                document.body.insertAdjacentHTML('beforeend',
9                    '<div class="gallery-image">' +
10                    '<a href="https://test.github.io/img/' + i + '.jpg">' +
11                    '<img src="https://test.github.io/img/' + i + '.jpg">' +
12                    '</a>' +
13                    '</div>');
14            }
15        }, false);
16        </script>
17      </div>
18    </div>
19</body>
20  <footer>
21    Copyright © 2017
22  </footer>

教えていただいたコードとCSSを利用してこのようなHTMLを作成したのですが、画像がフッターより下に表示されてしまいます。
これは何かHTMLに表示する位置を指定する必要があるのでしょうか。

投稿2017/01/21 17:13

編集2017/01/21 18:23

2001Y

総合スコア83

kei344

2017/01/21 17:29

document.write とは違う使い方をするものなので、まずは入門書を買って勉強されると良いです。Webの情報は「体系立てた情報」で無いことが多いので、本屋で何冊か買って読むのがお勧めです。

s8_chu

2017/01/21 17:29

document.body.insertAdjacentHTMLの部分はdocument.getElementById("lightgallery").insertAdjacentHTMLではないのですか？

2001Y

2017/01/21 17:33

なるほど、kei344さんありがとうございます。 s8_chuさん。教えていただいたようにしたらうまく動作しました。隅から隅までありがとうございました。

行動規範の内容に同意します

自己解決

JavaScript
1for (i=1; i<=13; i++) {
2document.write('<div class="gallery-img"><a href="https://test.github.io/img/' + i + '.jpg"><img src="https://test.github.io/site/test/' + i + '.jpg"></a></p>');
3        }

投稿2017/01/20 15:32

2001Y

総合スコア83

kei344

2017/01/20 17:10

document.write を使う利点など無いので、innerHTML か insertAdjacentHTML を使った書き方を使用されるほうが良いですよ。また、document.write を使って出力するコードを書いている入門書や入門サイトはかなり情報が古い可能性が高いのでお勧めしません。【document . writeはやめて、innerHTMLを使おう | Web Developers Antenna 〜ウェブ開発者アンテナ〜 [W'ANEB]】 http://web.antenna.work/innerhtml/ 【旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita】 http://qiita.com/gaogao_9/items/ec2b867d6941173fd0b1#documentwrite%E3%81%AF%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84-no_good

2001Y

2017/01/21 15:53

なるほど、わざわざありがとうございます。おっしゃっていることは何となく理解できたのですが、何せ全く知識がないので、もしよければ、上のdocument.write を innerHTML か insertAdjacentHTML で書き直していただけないでしょうか。よくわからない中かいたコードは以下になります document.addEventListener("DOMContentLoaded",function(eve){ i=1; i<=13; i++ document.body.innerHTML += "<div class="gallery-img"><a href="https://test.github.io/img/' + i + '.jpg"><img src="https://test.github.io/site/test/' + i + '.jpg"></a></p>"; },false);

s8_chu

2017/01/21 16:18

横から失礼します。コメント欄でのマークダウン機能はないようなので、私の回答にinnerHTMLと insertAdjacentHTMLで書き直したコードを追記しました。

2001Y

2017/01/21 16:22

ありがとうございます！！参考にさせていただきます。

行動規範の内容に同意します

あなたの回答