回答編集履歴
12
fix sample
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
1. 対象の要素に同じクラス名をつける方法（例 `.ranking`）
|
|
3
3
|
2. 対象の要素に連番でクラス名をつける方法（例 `.ranking1`, `.ranking2`...）
|
|
4
4
|
|
|
5
|
-
**動作確認サンプル：** https://jsfiddle.net/
|
|
5
|
+
**動作確認サンプル：** https://jsfiddle.net/ur4daeso/
|
|
6
6
|
|
|
7
7
|
### 同じクラス名の方法 .ranking
|
|
8
8
|
```javascript
|
11
change sample
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
1. 対象の要素に同じクラス名をつける方法（例 `.ranking`）
|
|
3
3
|
2. 対象の要素に連番でクラス名をつける方法（例 `.ranking1`, `.ranking2`...）
|
|
4
4
|
|
|
5
|
-
**動作確認サンプル：** https://jsfiddle.net/
|
|
5
|
+
**動作確認サンプル：** https://jsfiddle.net/60trjxsu/
|
|
6
6
|
|
|
7
7
|
### 同じクラス名の方法 .ranking
|
|
8
8
|
```javascript
|
10
id -> class
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
方法は2つありまして、
|
|
2
2
|
1. 対象の要素に同じクラス名をつける方法（例 `.ranking`）
|
|
3
|
-
2. 対象の要素に連番で
|
|
3
|
+
2. 対象の要素に連番でクラス名をつける方法（例 `.ranking1`, `.ranking2`...）
|
|
4
4
|
|
|
5
5
|
**動作確認サンプル：** https://jsfiddle.net/q20nm61o/
|
|
6
6
|
|
|
@@ -25,19 +25,15 @@
|
|
|
25
25
|
- functionの引数にかいた`i`は0番から始まります。
|
|
26
26
|
- ランキングの番号は1番から開始したいので、`i+1`で`0+1`, `1+1`...という感じにします。
|
|
27
27
|
|
|
28
|
-
### 連番で
|
|
28
|
+
### 連番でクラス名をふる場合 .ranking1, .ranking2...
|
|
29
|
-
連番のクラス名でも同じ方法でできますが、クラス名よりid名がおすすめです。
|
|
30
|
-
|
|
31
29
|
❗️❗️❗️ 注意 ❗️❗️❗️
|
|
32
30
|
> ●ランキング増えるたんびに書き直さないで済むようにしたい
|
|
33
31
|
この方法は質問者様の上記のご要望を **_満たしていません。_**
|
|
34
32
|
ランキングが増えるたびに1ヶ所だけコードを変更する必要があります。
|
|
35
33
|
|
|
36
|
-
|
|
37
|
-
|
|
38
34
|
```javascript
|
|
39
|
-
for (let i = 1; i <= 3; i++) {
|
|
35
|
+
for (let i = 1; i <= 3; i++) {
|
|
40
|
-
$('
|
|
36
|
+
$('.ranking' + i).prepend('<span class="num">' + i + '</span>');
|
|
41
37
|
}
|
|
42
38
|
```
|
|
43
39
|
`for()`の意味はご存知ですか？この文法を知らない場合、その旨を教えてください。回答に内容を追加して説明します。
|
|
@@ -47,13 +43,13 @@
|
|
|
47
43
|
- 要素の数（例では3つ）だけループしてほしいので、`i <= 3`としました。
|
|
48
44
|
- **_要素の数が変わるたびに、ここの3という数字を変更する必要があります。_**
|
|
49
45
|
|
|
50
|
-
`$('
|
|
46
|
+
`$('.ranking' + i)`
|
|
51
|
-
- この部分で「
|
|
47
|
+
- この部分で「.ranking」という文字列と、連番の`i`を結合し、`.ranking1`, `.ranking2`...というクラス名を表現します。
|
|
52
|
-
- そして1つずつ
|
|
48
|
+
- そしてそのクラス名の要素を1つずつ取得しています。
|
|
53
49
|
|
|
54
|
-
##### 同じクラス名と連番
|
|
50
|
+
##### 同じクラス名と連番クラス名の処理の違い
|
|
55
|
-
- 同じクラス名をつける方法では、全部の要素を一度に取得して、1つずつ処理するという方法で
|
|
51
|
+
- 同じクラス名をつける方法では、全部の要素を一度に取得して、1つずつ処理するという方法です。
|
|
56
52
|
- 全部要素を取得して → 1つの要素を処理して → 次の1つの要素を処理して → 繰り返す
|
|
57
|
-
- 連番の
|
|
53
|
+
- 連番のクラス名の場合では、1つずつ要素を取得して処理しています。
|
|
58
|
-
- 1つ要素を取得して処理して → 次の1つ要素を取得して処理して → 繰り返す
|
|
54
|
+
- 1つ要素を取得して＆処理して → 次の1つ要素を取得して＆処理して → 繰り返す
|
|
59
55
|
|
9
remove comments from code
test
CHANGED
|
@@ -6,8 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
### 同じクラス名の方法 .ranking
|
|
8
8
|
```javascript
|
|
9
|
-
$('.ranking').each(function(i) {
|
|
9
|
+
$('.ranking').each(function(i) {
|
|
10
|
-
// i=0から開始なので、1番から開始するためにi+1
|
|
11
10
|
$(this).prepend('<span class="num">' + (i+1) + '</span>');
|
|
12
11
|
})
|
|
13
12
|
```
|
|
@@ -37,7 +36,6 @@
|
|
|
37
36
|
|
|
38
37
|
|
|
39
38
|
```javascript
|
|
40
|
-
// i＝1番から開始して、要素の数（3つ）だけ同じ処理を繰り返す = ループする
|
|
41
39
|
for (let i = 1; i <= 3; i++) {
|
|
42
40
|
$('#ranking_' + i).prepend('<span class="num">' + i + '</span>');
|
|
43
41
|
}
|
8
見た目よく
test
CHANGED
|
@@ -27,11 +27,14 @@
|
|
|
27
27
|
- ランキングの番号は1番から開始したいので、`i+1`で`0+1`, `1+1`...という感じにします。
|
|
28
28
|
|
|
29
29
|
### 連番でid名をふる場合 #ranking_1, #ranking_2...
|
|
30
|
-
|
|
30
|
+
連番のクラス名でも同じ方法でできますが、クラス名よりid名がおすすめです。
|
|
31
|
+
|
|
31
|
-
|
|
32
|
+
❗️❗️❗️ 注意 ❗️❗️❗️
|
|
32
33
|
> ●ランキング増えるたんびに書き直さないで済むようにしたい
|
|
33
|
-
**
|
|
34
|
+
この方法は質問者様の上記のご要望を **_満たしていません。_**
|
|
34
35
|
ランキングが増えるたびに1ヶ所だけコードを変更する必要があります。
|
|
36
|
+
|
|
37
|
+
|
|
35
38
|
|
|
36
39
|
```javascript
|
|
37
40
|
// i＝1番から開始して、要素の数（3つ）だけ同じ処理を繰り返す = ループする
|
7
同じID名は要望を満たさない
test
CHANGED
|
@@ -28,6 +28,11 @@
|
|
|
28
28
|
|
|
29
29
|
### 連番でid名をふる場合 #ranking_1, #ranking_2...
|
|
30
30
|
クラス名よりid名がおすすめですが、連番のクラス名でも同じ方法でできます。
|
|
31
|
+
ただし注意がありまして、質問者様のご要望
|
|
32
|
+
> ●ランキング増えるたんびに書き直さないで済むようにしたい
|
|
33
|
+
**これを満たしていません。**
|
|
34
|
+
ランキングが増えるたびに1ヶ所だけコードを変更する必要があります。
|
|
35
|
+
|
|
31
36
|
```javascript
|
|
32
37
|
// i＝1番から開始して、要素の数（3つ）だけ同じ処理を繰り返す = ループする
|
|
33
38
|
for (let i = 1; i <= 3; i++) {
|
|
@@ -39,6 +44,7 @@
|
|
|
39
44
|
`for (let i = 1; i <= 3; i++) { `
|
|
40
45
|
- 連番が1番から始まってほしいので、`let i = 1`としました。
|
|
41
46
|
- 要素の数（例では3つ）だけループしてほしいので、`i <= 3`としました。
|
|
47
|
+
- **_要素の数が変わるたびに、ここの3という数字を変更する必要があります。_**
|
|
42
48
|
|
|
43
49
|
`$('#ranking_' + i)`
|
|
44
50
|
- この部分で「#ranking_」という文字列と、連番の`i`を結合し、
|
6
typo
test
CHANGED
|
@@ -7,7 +7,8 @@
|
|
|
7
7
|
### 同じクラス名の方法 .ranking
|
|
8
8
|
```javascript
|
|
9
9
|
$('.ranking').each(function(i) { // ここにiをかく
|
|
10
|
+
// i=0から開始なので、1番から開始するためにi+1
|
|
10
|
-
$(this).prepend('<span class="num">' + (i+1) + '</span>');
|
|
11
|
+
$(this).prepend('<span class="num">' + (i+1) + '</span>');
|
|
11
12
|
})
|
|
12
13
|
```
|
|
13
14
|
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
`.each(function(i) {...})`
|
|
20
21
|
- functionの引数（`()`の中）に`i`と書くと、jQueryの場合はループごとに自動で`i++`の処理をしてくれます。
|
|
21
22
|
- 取得した要素は全て↑のように配列みたいに格納されているので、これら1つずつに処理を行います。`.each()`
|
|
22
|
-
- 英語でeachは「〜毎に」「1つずつ」という意味で
|
|
23
|
+
- 英語でeachは「〜毎に」「1つずつ」という意味ですね。
|
|
23
24
|
|
|
24
25
|
`'<span class="num">' + (i+1) + '</span>'`
|
|
25
26
|
- functionの引数にかいた`i`は0番から始まります。
|
|
@@ -45,7 +46,7 @@
|
|
|
45
46
|
|
|
46
47
|
##### 同じクラス名と連番id名の処理の違い
|
|
47
48
|
- 同じクラス名をつける方法では、全部の要素を一度に取得して、1つずつ処理するという方法でしたが、
|
|
48
|
-
- 全部要素を取得して→1つの要素を処理して→次の1つの要素を処理して→繰り返す
|
|
49
|
+
- 全部要素を取得して → 1つの要素を処理して → 次の1つの要素を処理して → 繰り返す
|
|
49
50
|
- 連番のid名の場合では、1つずつ要素を取得して処理しています。
|
|
50
|
-
- 1つ要素を取得して処理して→次の1つ要素を取得して処理して→繰り返す
|
|
51
|
+
- 1つ要素を取得して処理して → 次の1つ要素を取得して処理して → 繰り返す
|
|
51
52
|
|
5
みやすく
test
CHANGED
|
@@ -42,6 +42,8 @@
|
|
|
42
42
|
`$('#ranking_' + i)`
|
|
43
43
|
- この部分で「#ranking_」という文字列と、連番の`i`を結合し、
|
|
44
44
|
- そして1つずつ要素を取得しています。
|
|
45
|
+
|
|
46
|
+
##### 同じクラス名と連番id名の処理の違い
|
|
45
47
|
- 同じクラス名をつける方法では、全部の要素を一度に取得して、1つずつ処理するという方法でしたが、
|
|
46
48
|
- 全部要素を取得して→1つの要素を処理して→次の1つの要素を処理して→繰り返す
|
|
47
49
|
- 連番のid名の場合では、1つずつ要素を取得して処理しています。
|
4
add
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
1. 対象の要素に同じクラス名をつける方法（例 `.ranking`）
|
|
3
3
|
2. 対象の要素に連番でid名をつける方法（例 `#ranking_1`, `#ranking_2`...）
|
|
4
4
|
|
|
5
|
-
**動作確認サンプル：** https://jsfiddle.net/
|
|
5
|
+
**動作確認サンプル：** https://jsfiddle.net/q20nm61o/
|
|
6
6
|
|
|
7
7
|
### 同じクラス名の方法 .ranking
|
|
8
8
|
```javascript
|
|
@@ -28,17 +28,22 @@
|
|
|
28
28
|
### 連番でid名をふる場合 #ranking_1, #ranking_2...
|
|
29
29
|
クラス名よりid名がおすすめですが、連番のクラス名でも同じ方法でできます。
|
|
30
30
|
```javascript
|
|
31
|
-
// i＝1番から開始して、要素の数（
|
|
31
|
+
// i＝1番から開始して、要素の数（3つ）だけ同じ処理を繰り返す = ループする
|
|
32
|
-
for (let i = 1; i <=
|
|
32
|
+
for (let i = 1; i <= 3; i++) {
|
|
33
33
|
$('#ranking_' + i).prepend('<span class="num">' + i + '</span>');
|
|
34
34
|
}
|
|
35
35
|
```
|
|
36
36
|
`for()`の意味はご存知ですか？この文法を知らない場合、その旨を教えてください。回答に内容を追加して説明します。
|
|
37
37
|
|
|
38
|
-
`for (let i = 1; i <=
|
|
38
|
+
`for (let i = 1; i <= 3; i++) { `
|
|
39
39
|
- 連番が1番から始まってほしいので、`let i = 1`としました。
|
|
40
|
-
- 要素の数（例では
|
|
40
|
+
- 要素の数（例では3つ）だけループしてほしいので、`i <= 3`としました。
|
|
41
41
|
|
|
42
42
|
`$('#ranking_' + i)`
|
|
43
|
-
- この部分で「#ranking_」という文字列と、連番の`i`を結合し、
|
|
43
|
+
- この部分で「#ranking_」という文字列と、連番の`i`を結合し、
|
|
44
|
+
- そして1つずつ要素を取得しています。
|
|
45
|
+
- 同じクラス名をつける方法では、全部の要素を一度に取得して、1つずつ処理するという方法でしたが、
|
|
46
|
+
- 全部要素を取得して→1つの要素を処理して→次の1つの要素を処理して→繰り返す
|
|
47
|
+
- 連番のid名の場合では、1つずつ要素を取得して処理しています。
|
|
48
|
+
- 1つ要素を取得して処理して→次の1つ要素を取得して処理して→繰り返す
|
|
44
49
|
|
3
typo
test
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
- 取得した要素は配列みたいに格納されています。
|
|
17
17
|
- `[0番目の.ranking要素, 1番目の.ranking要素, 2番目の.ranking要素]`
|
|
18
18
|
|
|
19
|
-
`.each(function(i) {)`
|
|
19
|
+
`.each(function(i) {...})`
|
|
20
20
|
- functionの引数（`()`の中）に`i`と書くと、jQueryの場合はループごとに自動で`i++`の処理をしてくれます。
|
|
21
21
|
- 取得した要素は全て↑のように配列みたいに格納されているので、これら1つずつに処理を行います。`.each()`
|
|
22
22
|
- 英語でeachは「〜毎に」「1つずつ」という意味でえすね。
|
2
typo
test
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
})
|
|
12
12
|
```
|
|
13
13
|
|
|
14
|
-
`$('.ranking')
|
|
14
|
+
`$('.ranking')`
|
|
15
15
|
- この部分で、`.ranking`というクラス名を持つ要素を全て（上から順番に）取得しています。
|
|
16
16
|
- 取得した要素は配列みたいに格納されています。
|
|
17
17
|
- `[0番目の.ranking要素, 1番目の.ranking要素, 2番目の.ranking要素]`
|
1
語弊の内容に解説を少々修正
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
**動作確認サンプル：** https://jsfiddle.net/d29p4eLg/
|
|
6
6
|
|
|
7
|
-
### 同じクラス名の方法
|
|
7
|
+
### 同じクラス名の方法 .ranking
|
|
8
8
|
```javascript
|
|
9
9
|
$('.ranking').each(function(i) { // ここにiをかく
|
|
10
10
|
$(this).prepend('<span class="num">' + (i+1) + '</span>'); // i=0から開始なので、1番から開始するためにi+1
|
|
@@ -14,19 +14,22 @@
|
|
|
14
14
|
`$('.ranking').each()`
|
|
15
15
|
- この部分で、`.ranking`というクラス名を持つ要素を全て（上から順番に）取得しています。
|
|
16
16
|
- 取得した要素は配列みたいに格納されています。
|
|
17
|
-
- `[
|
|
17
|
+
- `[0番目の.ranking要素, 1番目の.ranking要素, 2番目の.ranking要素]`
|
|
18
18
|
|
|
19
19
|
`.each(function(i) {)`
|
|
20
20
|
- functionの引数（`()`の中）に`i`と書くと、jQueryの場合はループごとに自動で`i++`の処理をしてくれます。
|
|
21
|
+
- 取得した要素は全て↑のように配列みたいに格納されているので、これら1つずつに処理を行います。`.each()`
|
|
22
|
+
- 英語でeachは「〜毎に」「1つずつ」という意味でえすね。
|
|
21
23
|
|
|
22
24
|
`'<span class="num">' + (i+1) + '</span>'`
|
|
23
25
|
- functionの引数にかいた`i`は0番から始まります。
|
|
24
26
|
- ランキングの番号は1番から開始したいので、`i+1`で`0+1`, `1+1`...という感じにします。
|
|
25
27
|
|
|
26
|
-
### 連番でid名をふる場合
|
|
28
|
+
### 連番でid名をふる場合 #ranking_1, #ranking_2...
|
|
27
29
|
クラス名よりid名がおすすめですが、連番のクラス名でも同じ方法でできます。
|
|
28
30
|
```javascript
|
|
29
|
-
|
|
31
|
+
// i＝1番から開始して、要素の数（4つ）だけ同じ処理を繰り返す = ループする
|
|
32
|
+
for (let i = 1; i <= 4; i++) {
|
|
30
33
|
$('#ranking_' + i).prepend('<span class="num">' + i + '</span>');
|
|
31
34
|
}
|
|
32
35
|
```
|