複数ページから取得した要素を目的の場所に出力したい

Question

実現したいこと

複数の別ページから取得した各要素を目的の場所にそれぞれ移動（または出力）させたい。

発生している問題・エラーメッセージ

URL列に記載しているリンクURLから別ページの要素を.load()メソッドで取得したものの
目的の場所（出力先の列）にそれぞれ移動（出力）できません。

該当のソースコード

jQuery(function ($) {
  function list(targets) {
    var targets$ = $(targets);
    var urls = [];
    targets$.each(function () {
      urls.push($(this).find('a').attr('href') + ' .txt');
    });
    targets$.each(function (index) {
      $(this).load(urls[index], function () {
        $(this).children().contents().unwrap();
      });
    });
  }
  list('tr:gt(0) td:nth-child(2)');
});

<table>
  <tr>
    <td>No.</td>
    <td>URL</td>
    <td>出力先</td>
  </tr>
  <tr>
    <td>1</td>
    <td><a href="page1.html">リンク１</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td><a href="page2.html">リンク2</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td><a href="page3.html">リンク3</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
</table>

<div class="txt">
ページ1の内容
</div>

Comments

[int32_t]

どういう結果になって欲しくて、現状のコードではどうなってしまうのでしょうか。具体的に書いてください。

Answer 1

ちょっと情報が足りなくてあいまいですね
すべてのアンカーは無理があるのでターゲットを絞ってみます

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('[data-target]').forEach(async x=>{
    const tmp = Object.assign(document.createElement("template"),{
    innerHTML:await fetch(x.href).then(res=>res.text())
    });
    x.closest('td').nextElementSibling.innerHTML=tmp.content.querySelector('.txt').innerHTML;
  });
});
</script>

<table>
  <tr>
    <td>No.</td>
    <td>URL</td>
    <td>出力先</td>
  </tr>
  <tr>
    <td>1</td>
    <td><a href="page1.html" data-target="1">リンク１</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td><a href="page2.html" data-target="1">リンク2</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>3</td>
    <td><a href="page3.html">リンク3</a></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
</table>

Comments

[whitezonbie]

yambejp様

ご回答ありがとうございます。期待通りの結果になり大変感謝しております。
ご教示いただいた記法を咀嚼して、しっかりと理解を深めたいと思います。
本当にありがとうございました。