[Q&A] javaScriptでURL先の画像とテキストを抽出してリストを完成させたい。

javaScriptでURL先の画像とテキストを抽出してリストを完成させたい。

解決したいこと

smartyのリストからURLをそれぞれ取得し、そのURL先にある画像とテキストを抽出してHTMLを完成させたいのですが、
一つ目のリストのURLしか取得できず、すべてのリストに一つめのURLから取得した同じ画像とテキストが表示されてしまい上手く実装できません。
よろしくお願い致します。

該当するソースコード

<ul>
<{section name=num loop=$freepage}>
<li class="blog-list">
<a href="<{$freepage[num].link_url}>" id="target">
<div class="blog-list__img">
</div>
<div class="blog-list__text"></div>
</a>
</li>
<{/section}>
</ul>

jQuery(document).ready(function($){
    let get_product_amount = 1; //取得する数

$(".blog-list").each(function(){
    let a = document.getElementById('target');
    $.ajax({
        url: a,
        cache: false,
        dataType:'html',
        success: function(html){
                let imgs = $(html).find('.url-blog img'); //URL先から画像取得
                let caption = $(html).find('.url-blog p'); //URL先からキャプション取得

    for (var i = 0; i < get_product_amount; i++) {
            $('.blog-list__img').append(imgs[i]); //画像入れる
            $('.blog-list__text').append(caption[i]); //キャプション入れる
                }
       }
    });
});
});

自分で試したこと

javaScriptの経験が浅いため、根本的に間違っているのかもしれません。。
よろしくお願い致します。

1Answer

@ohakutsu posted at 2021-02-04

おそらくこんな感じになると思います。
やっていることは、

(1) .blog_listクラスの要素を取得し、
(2) liタグのリストのidx番目のliタグ配下にある、aタグからhrefの値を取得。
(3) 取得後のimgs、captionをliタグ配下にある.blog-list__img、.blog-list__textの要素にappendしている

の繰り返しです。

javascript

$(function() {
  const getProductAmount = 1;

  $('.blog-list').each((idx, elm) => { // (1)
    const $li = $(elm);
    const url = $li.find('a').attr('href'); // (2)

    $.ajax({
      url: url,
      cache: false,
      dataType: 'html',
    }).done((html) => {
      const imgs = $(html).find('.url-blog img');
      const caption = $(html).find('.url-blog p');

      for (let i = 0; i < getProductAmount; i++) { // (3)
        $li.find('.blog-list__img').append(imgs[i]);
        $li.find('.blog-list__text').append(caption[i]);
      }
    });
  });
})

このソースコードを

に用意しておいたので、aタグのリンクを変えて試してみるのが良いかもしれません。
（動作未確認です）

1Like

Comments

@engineer-mnm
Questioner
ご丁寧に教えていただきありがとうございます。
無事動作致しました・・・本当に感謝です。
ありがとうございました！！！

Are you sure you want to delete the question?