子要素から一つ上の階層の隣り合った要素のidを取得したい

実現したいこと

1ページに複数のdivを作成し、divごとの一番下に上下の隣り合ったdivへのリンクを自動で作成したいです。
そのために上下のdivの、規則性のない任意のidを取得したいのですが、上手くいきません。

前提

ゲームブック風のwebページを作成したいと思っています。
ページ分割などではなく、ページ内リンクで対処したいです。

該当のソースコード

<html>
  <head>
  </head>
  <body>
    <div　id="setumei">
      ページの説明
    </div>

    <div class="topic" id="ccc">
      文章１
      <span class="updown"></span>
    </div>

    <div class="topic" id="aaa">
      文章２
      <span class="updown"></span>
    </div>

    <div class="topic" id="fff">
      文章３
      <span class="updown"></span>
    </div>

    <div class="topic" id="ggg">
      文章４
      <span class="updown"></span>
    </div>
  </body>
</html>

該当のソースコード2

<span class="updown"></span>の中に以下のようなコードをjsで作成することを目指しています。
例）id="aaa"に作成したいコード

<ul>
  <li><a href="#ccc">上</a>
  <li><a href="#">最初から</a>
  <li><a href="#fff">下</a>
</ul>

例）id="ggg"に作成したいコード

<ul>
  <li><a href="#fff">上</a>
  <li><a href="#">最初から</a>
  <li>下
</ul>

試したこと

ネットで見つけられた目次生成が一番近いと思い、それをいじってみましたが上手くいきませんでした。
自分ではリンク生成先が子要素だからではないかと考えているのですが、つぎはぎで作っているからかもしれず、よく分かっていません。

document.addEventListener('DOMContentLoaded', function () {
  const updown_class = 'updown';
  const updown_contents = document.getElementsByClassName(updown_class);
  const child = document.querySelector('.topic');
    let siblingPrev = child.previousElementSibling;
    let siblingNext = child.nextElementSibling;
      let siblingtPrevId = siblingPrev.id;
      let siblingtNextId = siblingNext.id;
  const ul = document.createElement('ul');
    const li1 = document.createElement('li');
      const a1 = document.createElement('a');
        a1.innerHTML = '上';
        a1.href = '#' + siblingtPrevId;
    const li2= document.createElement('li');
      const a2 = document.createElement('a');
        a2.innerHTML = "最初から";
        a2.href = '#';
    const li3 = document.createElement('li');
      const a3 = document.createElement('a');
        a3.innerHTML = "下";
        a3.href = '#' + siblingtNextId;
    li1.appendChild(a1);
    li2.appendChild(a2);
    li3.appendChild(a3);
    const li = ['li1', 'li2', 'li3'];
    ul.appendChild(li);
  updown_contents.appendChild(ul);
})

ypp

2023/05/05 03:41

<ul> <li><a href="#ccc">上</a> <li><a href="#">最初から</a> <li><a href="#fff">下</a> </ul> </li>が3つ足りません。

int32_t

2023/05/07 23:53

yppさん、この場合 </li> は省略可能です。

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

回答2件

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  let topic=document.querySelectorAll('.topic');
4  topic.forEach((x,y)=>{
5    let content="<ul>";
6    if(y>0) content+=`<liv><a href="#${topic[y-1].id}">上へ</a></li>`;
7    content+=`<li><a href="#">最初から</a></li>`;
8    if(y<topic.length-1) content+=`<li><a href="#${topic[y+1].id}">下へ</a></li>`;
9    content+="</ul>";
10    x.querySelector('.updown').innerHTML=content;
11  });
12});
13</script>
14<body>
15<div　id="setumei">
16ページの説明
17</div>
18
19<div class="topic" id="ccc">
20文章１
21<span class="updown"></span>
22</div>
23
24<div class="topic" id="aaa">
25文章２
26<span class="updown"></span>
27</div>
28
29<div class="topic" id="fff">
30文章３
31<span class="updown"></span>
32</div>
33
34<div class="topic" id="ggg">
35文章４
36<span class="updown"></span>
37</div>
38</body>

投稿2023/05/08 03:03

yambejp

総合スコア114775

実現したいことを考えると、class="topic" か class="updown" の要素について繰り返し処理が必要ですよね。そういう繰り返しがコード中にないことから、期待通りには動かないことは明らかです。

以下のような方針で処理するとよいかと思います。

class="topic" を持つ要素のリスト(topicsとする)に対して、インデックス i でループを行う
- topics[i] の中にある class="updown" を持つ要素を探し、その子として <ul> を作る
- もし i が 1 以上なら、topics[i - 1].id をもとに「上」リンクを作り、<ul> に追加する
- 「最初から」リンクを作り、<ul> に追加する
- もし i が topics.length - 1 より小さいなら、topics[i + 1].id をもとに「下」リンクを作り <ul> に追加する