質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17512questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7106questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 7,276

2001Y

score 59

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

<table>
  <tr>
    <td><a href="https://username.github.io/site/img/1.jpg"><img src="https://username.github.io/site/img/1.jpg" /></a></td>
    <td><a href="https://username.github.io/site/img/2.jpg"><img src="https://username.github.io/site/img/2.jpg" /></a></td>
    <td><a href="https://username.github.io/site/img/3.jpg"><img src="https://username.github.io/site/img/3.jpg" /></a></td>
  </tr>
  <tr>
    <td><a href="https://username.github.io/site/img/4.jpg"><img src="https://username.github.io/site/img/4.jpg" /></a></td>
    <td><a href="https://username.github.io/site/img/5.jpg"><img src="https://username.github.io/site/img/5.jpg" /></a></td>
    <td><a href="https://username.github.io/site/img/6.jpg"><img src="https://username.github.io/site/img/6.jpg" /></a></td>
  </tr>
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
</table>


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

$(function(){
  $('a').each(function(i){
      $(this)href('https://username.github.io/site/img/'+ (i+1) + '.jpg');
  });
  $('img').each(function(i){
      $(this)src('https://username.github.io/site/img/'+ (i+1) + '.jpg');
  });
});

追記

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

for (i=1; i<=13; i++) {
document.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>');
        }


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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+7

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

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<table>
    <tbody>
    <tr>
        <td>
            <a><img src=""></a>
        </td>
        <td>
            <a><img src=""></a>
        </td>
        <td>
            <a><img src=""></a>
        </td>
    </tr>
    <tr>
        <td>
            <a><img src=""></a>
        </td>
        <td>
            <a><img src=""></a>
        </td>
        <td>
            <a><img src=""></a>
        </td>
        <td>
            <a><img src=""></a>
        </td>
    </tr>
    </tbody>
</table>
<script>
    window.addEventListener("DOMContentLoaded", function () {
        let anchor = document.getElementsByTagName("a");
        let image = document.getElementsByTagName("img");
        let anchorList = Array.prototype.slice.call(anchor);
        let imageList = Array.prototype.slice.call(image);
        anchorList.forEach(function (val, index) {
            anchor[index].href = "https://placehold.jp/ff4747/ffffff/150x150.png?text=" + (index + 1);
        });
        imageList.forEach(function (val, index) {
            image[index].src = "https://placehold.jp/ff4747/ffffff/150x150.png?text=" + (index + 1)
        }, false);
    });
</script>
</body>
</html>

追記

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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        for (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></div>';
        }
    }, false);
</script>
</body>
</html>


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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
</head>
<body>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        for (i = 1; i <= 13; i++) {
            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>');
        }
    }, false);
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/22 00:56

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

    キャンセル

  • 2017/01/22 01:23

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

    キャンセル

  • 2017/01/22 01:54

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

    キャンセル

  • 2017/01/22 02:08

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

    キャンセル

  • 2017/01/22 02:09

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

    キャンセル

+6

こう。

$( function() {
  $( 'a' ).each( function( i ) {
      $( this ).prop( 'href', 'https://placehold.jp/24/99cc99/339933/350x150.png?text='+ ( i + 1 ) + '.jpg' );
  } );
  $('img' ).each( function( i ) {
      $( this ).prop( 'src', 'https://placehold.jp/24/99cc99/339933/150x50.png?text='+ ( i + 1 ) + '.jpg' );
  } );
} );

動くサンプル:https://jsfiddle.net/s6be2LL6/


追記:

$( function() {
    var html = '', img_count = 10, i = 0;
    while( i < img_count ) {
        ++i;
        html += '<a href="https://placehold.jp/24/99cc99/339933/350x150.png?text='+ i + '.jpg">';
        html += '<img src="https://placehold.jp/24/cc9999/993333/150x50.png?text='+ i + '.jpg">';
        html += '</a>';
    }
    $( 'body' ).html( html );
} );

動くサンプル:https://jsfiddle.net/s6be2LL6/2/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/22 00:56

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

    キャンセル

check解決した方法

0

for (i=1; i<=13; i++) {
document.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>');
        }

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/21 02: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


    キャンセル

  • 2017/01/22 00: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);

    キャンセル

  • 2017/01/22 01:18

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

    キャンセル

  • 2017/01/22 01:22

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

    キャンセル

0

<body>
    <div id="contents-main">
      <h1>ギャラリー</h1>
      <div id="lightgallery">
        <script>
        document.addEventListener("DOMContentLoaded", function () {
            for (i = 1; i <= 13; i++) {
                document.body.insertAdjacentHTML('beforeend',
                    '<div class="gallery-image">' +
                    '<a href="https://test.github.io/img/' + i + '.jpg">' +
                    '<img src="https://test.github.io/img/' + i + '.jpg">' +
                    '</a>' +
                    '</div>');
            }
        }, false);
        </script>
      </div>
    </div>
</body>
  <footer>
    Copyright © 2017
  </footer>


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/22 02:29

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

    キャンセル

  • 2017/01/22 02:29

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

    キャンセル

  • 2017/01/22 02:33

    なるほど、kei344さんありがとうございます。

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17512questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7106questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。