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

実現したいこと

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

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

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

該当のソースコード

jQuery
1jQuery(function ($) {
2  function list(targets) {
3    var targets$ = $(targets);
4    var urls = [];
5    targets$.each(function () {
6      urls.push($(this).find('a').attr('href') + ' .txt');
7    });
8    targets$.each(function (index) {
9      $(this).load(urls[index], function () {
10        $(this).children().contents().unwrap();
11      });
12    });
13  }
14  list('tr:gt(0) td:nth-child(2)');
15});

HTML（親）
1<table>
2  <tr>
3    <td>No.</td>
4    <td>URL</td>
5    <td>出力先</td>
6  </tr>
7  <tr>
8    <td>1</td>
9    <td><a href="page1.html">リンク１</a></td>
10    <td>&nbsp;</td>
11  </tr>
12  <tr>
13    <td>2</td>
14    <td><a href="page2.html">リンク2</a></td>
15    <td>&nbsp;</td>
16  </tr>
17  <tr>
18    <td>3</td>
19    <td><a href="page3.html">リンク3</a></td>
20    <td>&nbsp;</td>
21  </tr>
22  <tr>
23</table>

HTML（子：外部ページ）
1<div class="txt">
2ページ1の内容
3</div>

int32_t

2023/02/06 00:43

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

回答1件

ベストアンサー

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

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelectorAll('[data-target]').forEach(async x=>{
4    const tmp = Object.assign(document.createElement("template"),{
5    innerHTML:await fetch(x.href).then(res=>res.text())
6    });
7    x.closest('td').nextElementSibling.innerHTML=tmp.content.querySelector('.txt').innerHTML;
8  });
9});
10</script>
11
12<table>
13  <tr>
14    <td>No.</td>
15    <td>URL</td>
16    <td>出力先</td>
17  </tr>
18  <tr>
19    <td>1</td>
20    <td><a href="page1.html" data-target="1">リンク１</a></td>
21    <td>&nbsp;</td>
22  </tr>
23  <tr>
24    <td>2</td>
25    <td><a href="page2.html" data-target="1">リンク2</a></td>
26    <td>&nbsp;</td>
27  </tr>
28  <tr>
29    <td>3</td>
30    <td><a href="page3.html">リンク3</a></td>
31    <td>&nbsp;</td>
32  </tr>
33  <tr>
34</table>