回答編集履歴

2 要望によりコード修正

blackonyx

blackonyx score 366

2015/12/05 19:16  投稿

要件として
- **ページ内ナビゲーション**を作成する。
0. 「hoge1_child」にidを付与
0. 「hoge2_parent」内のdtタグにそれぞれの「info1」内の文字列ををコピーし、ページ内リンクを張る
0. 「hoge2_parent」内のddタグにそれぞれの「info2」内の文字列をコピー
```html
<div class="hoge1_parent">
 <div class="hoge1_child">
   <p class="info1">info1_1</p>
   <p class="info2">info2_1</p>
 </div>
 <div class="hoge1_child">
   <p class="info1">info1_2</p>
   <p class="info2">info2_2</p>
 </div>
 <div class="hoge1_child">
   <p class="info1">info1_3</p>
   <p class="info2">info2_3</p>
 </div>
</div>
```
```javascript
$(function() {
 var $hoge1Child = $(".hoge1_child");
 // hoge2_parent生成
 var $hoge2Parent = $("<dl>").addClass("hoge2_parent").appendTo("body");
 var $hoge2Parent = $("<ul>").addClass("hoge2_parent").appendTo("body");
   
 $hoge1Child.each(function(id) {
   // hoge1_childにidを付与
   var hoge1ChildId = "hoge1_child_" + (id + 1);
   $(this).attr("id", hoge1ChildId);
   // dt生成
   var $dtInfo1 = $("<dt>").append(
         $("<a>").attr("href", "#" + hoge1ChildId).text(
               $(this).find(".info1").text()));
   // dd生成
   var $ddInfo2 = $("<dd>").text($(this).find(".info2").text());
   // hoge2_parent内にdtタグおよびddタグ貼り付け
   $hoge2Parent.append($dtInfo1, $ddInfo2);
   // hoge2_parentへ貼り付け
   $hoge2Parent.append($("<li>").append($("<dl>").append($dtInfo1, $ddInfo2)));
 });
});
```
このような感じでいかがでしょうか。
1 id 生成時の修正

blackonyx

blackonyx score 366

2015/12/05 18:26  投稿

要件として
- **ページ内ナビゲーション**を作成する。
0. 「hoge1_child」にidを付与
0. 「hoge2_parent」内のdtタグにそれぞれの「info1」内の文字列ををコピーし、ページ内リンクを張る
0. 「hoge2_parent」内のddタグにそれぞれの「info2」内の文字列をコピー
```html
<div class="hoge1_parent">
 <div class="hoge1_child">
   <p class="info1">info1_1</p>
   <p class="info2">info2_1</p>
 </div>
 <div class="hoge1_child">
   <p class="info1">info1_2</p>
   <p class="info2">info2_2</p>
 </div>
 <div class="hoge1_child">
   <p class="info1">info1_3</p>
   <p class="info2">info2_3</p>
 </div>
</div>
```
```javascript
$(function() {
 var $hoge1Child = $(".hoge1_child");
 // hoge2_parent生成
 var $hoge2Parent = $("<dl>").addClass("hoge2_parent").appendTo("body");
   
 $hoge1Child.each(function(id) {
   // hoge1_childにidを付与
   var hoge1ChildId = "hoge1_child_" + id;
   var hoge1ChildId = "hoge1_child_" + (id + 1);
   $(this).attr("id", hoge1ChildId);
   // dt生成
   var $dtInfo1 = $("<dt>").append(
         $("<a>").attr("href", "#" + hoge1ChildId).text(
               $(this).find(".info1").text()));
   // dd生成
   var $ddInfo2 = $("<dd>").text($(this).find(".info2").text());
   // hoge2_parent内にdtタグおよびddタグ貼り付け
   $hoge2Parent.append($dtInfo1, $ddInfo2);
 });
});
```
このような感じでいかがでしょうか。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る