抽出した文字列で特定箇所へのページ内ナビゲーションを生成したい

抽出した文字列で、特定箇所へのページ内ナビゲーションを生成したいです。

具体的には以下の構成で「hoge1_child」が生成されます。
サンプルでは3つですが、生成される個数はランダムで決まっていません。

lang
1<div class="hoge1_parent">
2<div class="hoge1_child">
3<p class="info1">info1_1</p>
4<p class="info2">info2_1</p>
5</div>
6<div class="hoge1_child">
7<p class="info1">info1_2</p>
8<p class="info2">info2_2</p>
9</div>
10<div class="hoge1_child">
11<p class="info1">info1_3</p>
12<p class="info2">info2_3</p>
13</div>
14</div>

「hoge1_child」にidを付与し、別要素「hoge2_parent」内のdtタグにそれぞれの「info1」内の文字列ををコピーしメニュー名として使用したページ内ナビゲーションを作成したいです。
またddタグにはそれぞれの「info2」内の文字列をコピーしたいです。

lang
1<div class="hoge1_parent">
2<div class="hoge1_child" id="hoge1_child_1">
3<p class="info1">info1_1</p>
4<p class="info2">info2_1</p>
5</div>
6<div class="hoge1_child" id="hoge1_child_2">
7<p class="info1">info1_2</p>
8<p class="info2">info2_2</p>
9</div>
10<div class="hoge1_child" id="hoge1_child_3">
11<p class="info1">info1_3</p>
12<p class="info2">info2_3</p>
13</div>
14</div>
15
16<ul class="hoge2_parent">
17<li><dl><dt><a href="#hoge1_child_1">info1_1</a></dt><dd>info2_1</dd></dl></li>
18<li><dl><dt><a href="#hoge1_child_2">info1_2</a></dt><dd>info2_2</dd></dl></li>
19<li><dl><dt><a href="#hoge1_child_3">info1_3</a></dt><dd>info2_3</dd></dl></li>
20</ul>
21

ご教授の程よろしくお願いいたします。

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

回答2件

ベストアンサー

タグについているのですが jquery でそれを実装するという解釈で良いのでしょうか？

その場合以下の感じで参考になりますか？

js
1<script type="text/javascript">
2  $(function() {
3    var $childs = $('.hoge1_parent').children();
4    // クラスの重複数記録
5    var indexes = {};
6    var dts = [];
7    $childs.each(function() {
8      var className = $(this).attr('class');
9      if (!(className in indexes)) {
10        indexes[className] = 0;
11      }
12      // クラスの重複をカウント
13      var i = indexes[className] += 1;
14      // id 付与
15      var idName = className + '_' + i;
16      $(this).attr('id', idName);
17      // dt, dd 要素作成
18      var info1 = $(this).find('.info1').html();
19      var info2 = $(this).find('.info2').html();
20      $a = $('<a/>').html(info1).attr('href', '#' + idName);
21      $dt = $('<dt/>').append($a);
22      $dd = $('<dd/>').html(info2);
23      dts.push($dt);
24      dts.push($dd);
25    });
26    $dl = $('<dl/>').attr('class', 'hoge2_parent').append(dts);
27    $('.hoge1_parent').after($dl);
28  });
29</script>
30

--- 追記 ul li 対応

js
1<script type="text/javascript">
2  $(function() {
3    var $childs = $('.hoge1_parent').children();
4    // クラスの重複数記録
5    var indexes = {};
6    var $dl = $('<ul/>').attr('class', 'hoge2_parent');
7    var $li_tmp = $('<li><dl><dt><a href="#"></a></dt><dd></dd></dl></li>')
8    $childs.each(function() {
9      var className = $(this).attr('class');
10      if (!(className in indexes)) {
11        indexes[className] = 0;
12      }
13      // クラスの重複をカウント
14      var i = indexes[className] += 1;
15      // id 付与
16      var idName = className + '_' + i;
17      $(this).attr('id', idName);
18      // dt, dd 要素作成
19      var info1 = $(this).find('.info1').html();
20      var info2 = $(this).find('.info2').html();
21      $li = $li_tmp.clone();
22      $li.find('a').html(info1).attr('href', '#' + idName);
23      $li.find('dd').html(info2);
24      $dl.append($li);
25    });
26    $('.hoge1_parent').after($dl);
27  });
28</script>

投稿2015/12/05 08:52

編集2015/12/05 10:08

anozon

総合スコア662

castail

2015/12/05 09:51

ご回答ありがとうございます。ご指示頂いた内容で実現いたしました！感謝致します。ただ、「hoge2_parent」の構成を誤っておりました。。。 = ▼誤 <dl class="hoge2_parent"> <dt><a href="#hoge1_child_1">info1_1</a></dt><dd>info2_1</dd> <dt><a href="#hoge1_child_2">info1_2</a></dt><dd>info2_2</dd> <dt><a href="#hoge1_child_3">info1_3</a></dt><dd>info2_3</dd> </dl> ▼正 <ul class="hoge2_parent"> <li><dl><dt><a href="#hoge1_child_1">info1_1</a></dt><dd>info2_1</dd></dl></li> <li><dl><dt><a href="#hoge1_child_2">info1_2</a></dt><dd>info2_2</dd></dl></li> <li><dl><dt><a href="#hoge1_child_3">info1_3</a></dt><dd>info2_3</dd></dl></li> </ul> = こちらのミスで大変申し訳ございません。こちらの構成での記述方法を再度お教え願えませんでしょうか？

anozon

2015/12/05 10:09

追記しました

blackonyx

2015/12/05 10:44

「hoge1_child」以外のclassの場合でも、正常に動作する辺りは、流石です。素晴らしい。

castail

2015/12/08 02:32

ご回答ありがとうございました。ご教授頂いた内容で実現できました！感謝いたします。

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

要件として

ページ内ナビゲーションを作成する。

「hoge1_child」にidを付与
「hoge2_parent」内のdtタグにそれぞれの「info1」内の文字列ををコピーし、ページ内リンクを張る
「hoge2_parent」内のddタグにそれぞれの「info2」内の文字列をコピー

html
1<div class="hoge1_parent">
2  <div class="hoge1_child">
3    <p class="info1">info1_1</p>
4    <p class="info2">info2_1</p>
5  </div>
6  <div class="hoge1_child">
7    <p class="info1">info1_2</p>
8    <p class="info2">info2_2</p>
9  </div>
10  <div class="hoge1_child">
11    <p class="info1">info1_3</p>
12    <p class="info2">info2_3</p>
13  </div>
14</div>

javascript
1$(function() {
2  var $hoge1Child = $(".hoge1_child");
3  // hoge2_parent生成
4  var $hoge2Parent = $("<ul>").addClass("hoge2_parent").appendTo("body");
5	
6  $hoge1Child.each(function(id) {
7    // hoge1_childにidを付与
8    var hoge1ChildId = "hoge1_child_" + (id + 1);
9    $(this).attr("id", hoge1ChildId);
10    // dt生成
11    var $dtInfo1 = $("<dt>").append(
12          $("<a>").attr("href", "#" + hoge1ChildId).text(
13                $(this).find(".info1").text()));
14    // dd生成
15    var $ddInfo2 = $("<dd>").text($(this).find(".info2").text());
16    // hoge2_parentへ貼り付け
17    $hoge2Parent.append($("<li>").append($("<dl>").append($dtInfo1, $ddInfo2)));
18  });
19});