回答編集履歴

2 要望によりコード修正

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 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);

});

});

```

このような感じでいかがでしょうか。