質問編集履歴
9
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -31,10 +31,7 @@
|
|
|
31
31
|
thisN = data[n];
|
|
32
32
|
thisN.setAttribute('id', 'id-' + (n + 1));
|
|
33
33
|
targetNum = thisN.id;
|
|
34
|
-
let sectS = thisN.closest('section'),
|
|
35
|
-
|
|
34
|
+
sectA = thisN.closest('section').querySelector('a');
|
|
36
|
-
// console.log(sectS);
|
|
37
|
-
// console.log(sectA);
|
|
38
35
|
sectTitle = sectA.textContent;
|
|
39
36
|
sectLink = sectA.href;
|
|
40
37
|
targetText = thisN.innerHTML;
|
|
@@ -50,13 +47,13 @@
|
|
|
50
47
|
$searchList.appendChild(p);
|
|
51
48
|
$p = $searchList.querySelector('p:nth-of-type(' + (i + 1) + ')');
|
|
52
49
|
a = document.createElement('a');
|
|
53
|
-
a.href = '#' + targetNum;
|
|
54
50
|
a.insertAdjacentHTML('afterbegin', resultNum[i]);
|
|
55
51
|
$p.appendChild(a);
|
|
56
52
|
a2 = document.createElement('a');
|
|
53
|
+
$p.appendChild(a2);
|
|
57
54
|
// ここまでを二回目のループのみで実行したい
|
|
55
|
+
a.href = '#' + targetNum;
|
|
58
56
|
a2.insertAdjacentHTML('afterbegin', '<span class="sect-title">' + sectTitle + '</span>');
|
|
59
|
-
$p.appendChild(a2);
|
|
60
57
|
};
|
|
61
58
|
}
|
|
62
59
|
hitNum = '<span class="marker1">Result：' + searchResult.length + ' titles</span>';
|
8
編集
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
検索機能で
|
|
1
|
+
検索機能で入れ子ループの二回目だけで処理したい
|
body
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
JavaScriptで検索機能をつくっており、検索結果のリンク先がすべて同じになってしまう悩みを解決したいです。
|
|
3
|
+
JavaScriptで検索機能をつくっており、検索結果のリンク先がすべて同じになってしまう悩みを解決したいです。 // 一応解決
|
|
4
4
|
|
|
5
|
+
追記
|
|
6
|
+
ループを入れ子にしたところ目的は達成したのですが、二回目のループ内で二回目のループのみ実行したい処理があります。一回目のループをオフにするにはどうすればいいでしょうか。
|
|
7
|
+
|
|
5
8
|
### 発生している問題・エラーメッセージ
|
|
6
|
-
エラーはなく、検索機能は動きますが、リンクが同じになってしまいます。
|
|
9
|
+
エラーはなく、検索機能は動きますが、リンクが同じになってしまいます。 // 解決
|
|
10
|
+
以下追記
|
|
7
11
|
|
|
8
12
|
### 該当のソースコード
|
|
9
13
|
|
7
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
$hitNum.textContent = '';
|
|
24
24
|
if (searchText != '') {
|
|
25
25
|
data = document.querySelectorAll('.target-area p');
|
|
26
|
-
for (let n = 0; n < data.length; n = (n + 1)) {
|
|
26
|
+
loopOne: for (let n = 0; n < data.length; n = (n + 1)) {
|
|
27
27
|
thisN = data[n];
|
|
28
28
|
thisN.setAttribute('id', 'id-' + (n + 1));
|
|
29
29
|
targetNum = thisN.id;
|
|
@@ -37,17 +37,20 @@
|
|
|
37
37
|
if (targetText.indexOf(searchText) != -1) {
|
|
38
38
|
searchResult.push(targetText);
|
|
39
39
|
};
|
|
40
|
+
|
|
40
41
|
resultNum = searchResult.slice();
|
|
41
42
|
// console.log(resultNum);
|
|
42
|
-
for (let i = 0; i < searchResult.length; i = (i + 1)) {
|
|
43
|
+
loopTwo: for (let i = 0; i < searchResult.length; i = (i + 1)) {
|
|
44
|
+
// ここから
|
|
43
45
|
p = document.createElement('p');
|
|
44
46
|
$searchList.appendChild(p);
|
|
45
|
-
|
|
47
|
+
$p = $searchList.querySelector('p:nth-of-type(' + (i + 1) + ')');
|
|
46
48
|
a = document.createElement('a');
|
|
47
49
|
a.href = '#' + targetNum;
|
|
48
50
|
a.insertAdjacentHTML('afterbegin', resultNum[i]);
|
|
49
51
|
$p.appendChild(a);
|
|
50
52
|
a2 = document.createElement('a');
|
|
53
|
+
// ここまでを二回目のループのみで実行したい
|
|
51
54
|
a2.insertAdjacentHTML('afterbegin', '<span class="sect-title">' + sectTitle + '</span>');
|
|
52
55
|
$p.appendChild(a2);
|
|
53
56
|
};
|
6
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,7 +11,6 @@
|
|
|
11
11
|
document.addEventListener('DOMContentLoaded', function () {
|
|
12
12
|
let $search = document.querySelector('#search-text'),
|
|
13
13
|
$sect = document.querySelectorAll('.target-area section');
|
|
14
|
-
// }
|
|
15
14
|
searchWord = function (e) {
|
|
16
15
|
e.preventDefault();
|
|
17
16
|
let searchText = $search.value,
|
|
@@ -38,23 +37,21 @@
|
|
|
38
37
|
if (targetText.indexOf(searchText) != -1) {
|
|
39
38
|
searchResult.push(targetText);
|
|
40
39
|
};
|
|
40
|
+
resultNum = searchResult.slice();
|
|
41
|
+
// console.log(resultNum);
|
|
42
|
+
for (let i = 0; i < searchResult.length; i = (i + 1)) {
|
|
43
|
+
p = document.createElement('p');
|
|
44
|
+
$searchList.appendChild(p);
|
|
45
|
+
let $p = $searchList.querySelector('p:nth-of-type(' + (i + 1) + ')');
|
|
46
|
+
a = document.createElement('a');
|
|
47
|
+
a.href = '#' + targetNum;
|
|
48
|
+
a.insertAdjacentHTML('afterbegin', resultNum[i]);
|
|
49
|
+
$p.appendChild(a);
|
|
50
|
+
a2 = document.createElement('a');
|
|
51
|
+
a2.insertAdjacentHTML('afterbegin', '<span class="sect-title">' + sectTitle + '</span>');
|
|
52
|
+
$p.appendChild(a2);
|
|
53
|
+
};
|
|
41
54
|
}
|
|
42
|
-
resultNum = searchResult.slice();
|
|
43
|
-
// console.log(resultNum);
|
|
44
|
-
for (let i = 0; i < searchResult.length; i = (i + 1)) {
|
|
45
|
-
p = document.createElement('p');
|
|
46
|
-
$searchList.appendChild(p);
|
|
47
|
-
let $p = $searchList.querySelector('p:nth-of-type(' + (i + 1) + ')');
|
|
48
|
-
a = document.createElement('a');
|
|
49
|
-
a.href = '#' + targetNum;
|
|
50
|
-
a.insertAdjacentHTML('afterbegin', resultNum[i]);
|
|
51
|
-
$p.appendChild(a);
|
|
52
|
-
a2 = document.createElement('a');
|
|
53
|
-
a2.href = sectLink;
|
|
54
|
-
a2.insertAdjacentHTML('afterbegin', '<span class="sect-title">' + sectTitle + '</span>');
|
|
55
|
-
$p.appendChild(a2);
|
|
56
|
-
};
|
|
57
|
-
|
|
58
55
|
hitNum = '<span class="marker1">Result：' + searchResult.length + ' titles</span>';
|
|
59
56
|
$hitNum.insertAdjacentHTML('beforeend', hitNum);
|
|
60
57
|
}
|
|
@@ -136,6 +133,10 @@
|
|
|
136
133
|
|
|
137
134
|
また、「<span class="s_m">xxx</span> 」を出力結果から省くことはできますでしょうか。
|
|
138
135
|
|
|
136
|
+
### 追記
|
|
137
|
+
ループを広げてみたコードに修正したところ、目的は達成されました。
|
|
138
|
+
しかし、一回目のループ分pとaが作られてしまうのを制限したいです。ループの回数を制限するにはどうすればいいでしょうか。
|
|
139
|
+
|
|
139
140
|
### 試したこと
|
|
140
141
|
ループの外に
|
|
141
142
|
```js
|
5
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -20,39 +20,38 @@
|
|
|
20
20
|
let searchResult,
|
|
21
21
|
hitNum;
|
|
22
22
|
searchResult = [];
|
|
23
|
-
$searchList.
|
|
23
|
+
$searchList.textContent = '';
|
|
24
|
-
$hitNum.
|
|
24
|
+
$hitNum.textContent = '';
|
|
25
25
|
if (searchText != '') {
|
|
26
26
|
data = document.querySelectorAll('.target-area p');
|
|
27
27
|
for (let n = 0; n < data.length; n = (n + 1)) {
|
|
28
28
|
thisN = data[n];
|
|
29
29
|
thisN.setAttribute('id', 'id-' + (n + 1));
|
|
30
|
+
targetNum = thisN.id;
|
|
31
|
+
let sectS = thisN.closest('section'),
|
|
32
|
+
sectA = sectS.querySelector('a');
|
|
33
|
+
// console.log(sectS);
|
|
34
|
+
// console.log(sectA);
|
|
35
|
+
sectTitle = sectA.textContent;
|
|
36
|
+
sectLink = sectA.href;
|
|
30
|
-
targetText = thisN.
|
|
37
|
+
targetText = thisN.innerHTML;
|
|
31
38
|
if (targetText.indexOf(searchText) != -1) {
|
|
32
39
|
searchResult.push(targetText);
|
|
33
40
|
};
|
|
34
41
|
}
|
|
35
|
-
sectA = thisN.closest('section').querySelector('a');
|
|
36
|
-
console.log(sectA); // これが.lastのaタグになってしまう
|
|
37
|
-
sectTitle = sectA.innerHTML;
|
|
38
|
-
sectLink = sectA.href;
|
|
39
42
|
resultNum = searchResult.slice();
|
|
40
43
|
// console.log(resultNum);
|
|
41
44
|
for (let i = 0; i < searchResult.length; i = (i + 1)) {
|
|
42
45
|
p = document.createElement('p');
|
|
43
46
|
$searchList.appendChild(p);
|
|
44
47
|
let $p = $searchList.querySelector('p:nth-of-type(' + (i + 1) + ')');
|
|
45
|
-
$p.innerHTML = resultNum[i];
|
|
46
|
-
let pp = $p.querySelector('p'),
|
|
47
|
-
link = pp.id,
|
|
48
|
-
inner = pp.innerHTML;
|
|
49
48
|
a = document.createElement('a');
|
|
50
|
-
a.innerHTML = inner;
|
|
51
|
-
pp.parentNode.replaceChild(a, pp);
|
|
52
|
-
a.href = '#' +
|
|
49
|
+
a.href = '#' + targetNum;
|
|
50
|
+
a.insertAdjacentHTML('afterbegin', resultNum[i]);
|
|
51
|
+
$p.appendChild(a);
|
|
53
52
|
a2 = document.createElement('a');
|
|
54
53
|
a2.href = sectLink;
|
|
55
|
-
a2.
|
|
54
|
+
a2.insertAdjacentHTML('afterbegin', '<span class="sect-title">' + sectTitle + '</span>');
|
|
56
55
|
$p.appendChild(a2);
|
|
57
56
|
};
|
|
58
57
|
|
4
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -82,43 +82,53 @@
|
|
|
82
82
|
<div class="target-area">
|
|
83
83
|
<section>
|
|
84
84
|
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample1</a></h3>
|
|
85
|
+
<div class="short">
|
|
85
|
-
|
|
86
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
86
|
-
|
|
87
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
87
|
-
|
|
88
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
88
|
-
|
|
89
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
89
|
-
|
|
90
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
91
|
+
</div>
|
|
90
92
|
</section>
|
|
91
93
|
<section>
|
|
92
94
|
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample2</a></h3>
|
|
95
|
+
<div class="short">
|
|
93
|
-
|
|
96
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
94
|
-
|
|
97
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
95
|
-
|
|
98
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
96
|
-
|
|
99
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
97
|
-
|
|
100
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
101
|
+
</div>
|
|
98
102
|
</section>
|
|
99
103
|
<section>
|
|
100
104
|
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample3</a></h3>
|
|
105
|
+
<div class="short">
|
|
101
|
-
|
|
106
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
102
|
-
|
|
107
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
103
|
-
|
|
108
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
104
|
-
|
|
109
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
105
|
-
|
|
110
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
111
|
+
</div>
|
|
106
112
|
</section>
|
|
107
113
|
<section>
|
|
108
114
|
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample4</a></h3>
|
|
115
|
+
<div class="short">
|
|
109
|
-
|
|
116
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
110
|
-
|
|
117
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
111
|
-
|
|
118
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
112
|
-
|
|
119
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
113
|
-
|
|
120
|
+
<p>あのイーハトーヴォのすきとおった風</p>
|
|
121
|
+
</div>
|
|
114
122
|
</section>
|
|
115
123
|
<section class="last">
|
|
116
124
|
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample5</a></h3>
|
|
125
|
+
<div class="short">
|
|
117
|
-
|
|
126
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
118
|
-
|
|
127
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
119
|
-
|
|
128
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
120
|
-
|
|
129
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
121
|
-
|
|
130
|
+
<p>The quick brown fox jumps over the lazy dog</p>
|
|
131
|
+
</div>
|
|
122
132
|
</section>
|
|
123
133
|
</div>
|
|
124
134
|
```
|
3
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -138,5 +138,24 @@
|
|
|
138
138
|
これを出してみたのですが、結果は変わりませんでした。
|
|
139
139
|
何が問題で結果がすべて同じになってしまうのか、どうかご助力いただけないでしょうか。
|
|
140
140
|
|
|
141
|
+
ループの中に戻しました。
|
|
142
|
+
```js
|
|
143
|
+
for (let n = 0; n < data.length; n = (n + 1)) {
|
|
144
|
+
thisN = data[n];
|
|
145
|
+
thisN.setAttribute('id', 'id-' + (n + 1));
|
|
146
|
+
let sectS = thisN.closest('section'),
|
|
147
|
+
sectA = sectS.querySelector('a');
|
|
148
|
+
console.log(sectS); // （ループで数が多いが）これは取得できる
|
|
149
|
+
// sectAはすべて同じになる
|
|
150
|
+
sectTitle = sectA.innerHTML;
|
|
151
|
+
sectLink = sectA.href;
|
|
152
|
+
targetText = thisN.outerHTML;
|
|
153
|
+
if (targetText.indexOf(searchText) != -1) {
|
|
154
|
+
searchResult.push(targetText);
|
|
155
|
+
};
|
|
156
|
+
}
|
|
157
|
+
```
|
|
158
|
+
コメントアウトでも書きましたが、sectionは取得できますが、aは全てSample5になってしまいます。
|
|
159
|
+
|
|
141
160
|
### 補足情報（FW/ツールのバージョンなど）
|
|
142
161
|
Firefox 最新版
|
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
|
|
82
82
|
<div class="target-area">
|
|
83
83
|
<section>
|
|
84
|
-
<h3><a href="test.html">Sample1</a></h3>
|
|
84
|
+
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample1</a></h3>
|
|
85
85
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
86
86
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
87
87
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
90
90
|
</section>
|
|
91
91
|
<section>
|
|
92
|
-
<h3><a href="test.html">Sample2</a></h3>
|
|
92
|
+
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample2</a></h3>
|
|
93
93
|
<p>あのイーハトーヴォのすきとおった風</p>
|
|
94
94
|
<p>あのイーハトーヴォのすきとおった風</p>
|
|
95
95
|
<p>あのイーハトーヴォのすきとおった風</p>
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
<p>あのイーハトーヴォのすきとおった風</p>
|
|
98
98
|
</section>
|
|
99
99
|
<section>
|
|
100
|
-
<h3><a href="test.html">Sample3</a></h3>
|
|
100
|
+
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample3</a></h3>
|
|
101
101
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
102
102
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
103
103
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
106
106
|
</section>
|
|
107
107
|
<section>
|
|
108
|
-
<h3><a href="test.html">Sample4</a></h3>
|
|
108
|
+
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample4</a></h3>
|
|
109
109
|
<p>あのイーハトーヴォのすきとおった風</p>
|
|
110
110
|
<p>あのイーハトーヴォのすきとおった風</p>
|
|
111
111
|
<p>あのイーハトーヴォのすきとおった風</p>
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
<p>あのイーハトーヴォのすきとおった風</p>
|
|
114
114
|
</section>
|
|
115
115
|
<section class="last">
|
|
116
|
-
<h3><a href="test.html">Sample5</a></h3>
|
|
116
|
+
<h3><a href="test.html"><span class="s_m">'21.10.04</span> Sample5</a></h3>
|
|
117
117
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
118
118
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
119
119
|
<p>The quick brown fox jumps over the lazy dog</p>
|
|
@@ -125,6 +125,8 @@
|
|
|
125
125
|
コメントアウトのconsoleでは、全てsection.lastのaが出力されました。コンソールには一件しか出力されなかったので、pの親要素のsectionの子要素aをそれぞれ取得することが出来ていないようでした。
|
|
126
126
|
.sect-title の中身も、すべてSample5となってしまいます。
|
|
127
127
|
|
|
128
|
+
また、「<span class="s_m">xxx</span> 」を出力結果から省くことはできますでしょうか。
|
|
129
|
+
|
|
128
130
|
### 試したこと
|
|
129
131
|
ループの外に
|
|
130
132
|
```js
|
1
変更
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
sectA = thisN.closest('section').querySelector('a');
|
|
36
|
-
console.log(sectA); // これが
|
|
36
|
+
console.log(sectA); // これが.lastのaタグになってしまう
|
|
37
37
|
sectTitle = sectA.innerHTML;
|
|
38
38
|
sectLink = sectA.href;
|
|
39
39
|
resultNum = searchResult.slice();
|
|
@@ -122,8 +122,8 @@
|
|
|
122
122
|
</section>
|
|
123
123
|
</div>
|
|
124
124
|
```
|
|
125
|
-
コメントアウトのconsoleでは、全てsection.lastのaが出力されました。
|
|
125
|
+
コメントアウトのconsoleでは、全てsection.lastのaが出力されました。コンソールには一件しか出力されなかったので、pの親要素のsectionの子要素aをそれぞれ取得することが出来ていないようでした。
|
|
126
|
-
.sect-title の中身も、Sample5となってしまいます。
|
|
126
|
+
.sect-title の中身も、すべてSample5となってしまいます。
|
|
127
127
|
|
|
128
128
|
### 試したこと
|
|
129
129
|
ループの外に
|