コード記述の簡略化の仕方がわかりません。

Question

前提

ランキング設置にともない自動でナンバリングをするコードを書いてみました。
ですが、この書き方だとランキングがふえるたんびに書き直さないといけません。
書き直さないで済むこと＆記述を軽くすることは可能なのでしょうか？

実現したいこと

●記述を簡略化＆軽くしたい
●ランキング増えるたんびに書き直さないで済むようにしたい

該当のソースコード

$(function() {
var i = 1;
var i2 = 1;
var i3 = 1;
var i4 = 1;
var i5 = 1;
var i6 = 1;
var i7 = 1;

						$('.ranking1').each(function(){
						  $(this).prepend('<span class="num">' + i + '</span>');
						  i++;
						});
						
						$('.ranking2').each(function(){
						  $(this).prepend('<span class="num">' + i2 + '</span>');
						  i2++;
						});
					  
						$('.ranking3').each(function(){
						  $(this).prepend('<span class="num">' + i3 + '</span>');
						  i3++;
						});
						
						$('.ranking4').each(function(){
						  $(this).prepend('<span class="num">' + i4 + '</span>');
						  i4++;
						});
						
						$('.ranking5').each(function(){
						  $(this).prepend('<span class="num">' + i5 + '</span>');
						  i5++;
						});
						
						$('.ranking6').each(function(){
						  $(this).prepend('<span class="num">' + i6 + '</span>');
						  i6++;
						});
						
						$('.ranking7').each(function(){
						  $(this).prepend('<span class="num">' + i7 + '</span>');
						  i7++;
						});
					  });
						

試したこと

調べてみました。対応できませんでした。。。

Comments

[m.ts10806]

＞調べてみました。対応できませんでした。。。

有益な情報があったが適用できなかっただけなのか、
そもそも有益な情報がなかったのか
はたまた

これだけでは分からないので具体的に記載してください。
調べたこと試したこと。

Answer 1

jQueryは使ったことないけどこれでいけるかな？

$(function() {
  for (let ranking = 1; ranking <= 7; ranking++) {
    let i = 1;
    $('.ranking' + ranking).each(function(){
      $(this).prepend('<span class="num">' + i + '</span>');
        i++;
    });
  }
});

Answer 2

この場合は、どうなりますか？

$(function() {
var i = 1;
var i2 = 1;
var i3 = 1;
var i4 = 1;
var i5 = 1;
var i6 = 1;
var i7 = 1;
$('.ranklist1 p.rank2').each(function(){
$(this).prepend('<span class="num">' + i + '</span>');
i++;
});

							$('.ranklist2 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i2 + '</span>');
							  i2++;
							});
						  
							$('.ranklist3 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i3 + '</span>');
							  i3++;
							});
							
							$('.ranklist4 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i4 + '</span>');
							  i4++;
							});
							
							$('.ranklist5 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i5 + '</span>');
							  i5++;
							});
							
							$('.ranklist6 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i6 + '</span>');
							  i6++;
							});
							
							$('.ranklist7 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i7 + '</span>');
							  i7++;
							});
						  });

Comments

[Cocode]

どなたかが低評価つけられていますが、どうしてかと言うと、そちらの質問は質問の投稿を編集して追加してください😀
ここは回答欄なので…！

Answer 3

ひとつのやり方としては、各ランキングアイテムのCSSクラスであるranking1, ranking2 ... といった文字列をキーにして出現回数を値とするMapでカウンターを作ることです。

この回答では質問にあるコード

$('.ranking1').each(function(){
  $(this).prepend('<span class="num">' + i + '</span>');
  i++;
});

$('.ranking2').each(function(){
  $(this).prepend('<span class="num">' + i2 + '</span>');
  i2++;
});

・・・

から推測されるHTMLとして以下

<ul>
<li class="ranking3">あいうえお</li>
<li class="ranking1">かきくけこ</li>
<li class="ranking4">さしすせそ</li>
<li class="ranking1">たちつてと</li>
<li class="ranking3">なにぬねの</li>
<li class="ranking1">はひふへほ</li>
<li class="ranking4">まみむめも</li>
<li class="ranking2">やゆよ</li>
<li class="ranking1">らりるれろ</li>
<li class="ranking2">わをん</li>
</ul>

を想定して、Mapを使う具体的なやり方の一例を挙げていきます。なお上記のHTMLはMapを使う説明のために必要最低限の簡易なものです。（※CSSクラス指定がより複雑な場合の対応を回答の末尾に追記しました。)

欲しいのは 'ranking1', 'ranking2' ... といった文字列を与えるとそれのカウント数を返してくれる関数です。ですので、まずそのような関数を作って返してくれる(高階)関数makeCounter ：

function makeCounter() {
  const map = new Map;
  
  return (key) => {
    const count = 1 + (map.get(key) || 0);
    map.set(key, count);
    return count;
  }
}

を作っておきます。次にこれを実行して返される関数を変数 countOf に代入しておきます：

const countOf = makeCounter();

この countOf は関数であり引数にCSSクラス名の ranking<数字> の文字列を渡すことで各ランキング別の出現順を表す1, 2, 3 ･･･の番号を得ることができます。これを使って、全ランキングアイテムを取ってきてそれらの各々に順位表示のspan を prepend するのは以下のように書けます。

$('[class^=ranking]').each(function() {        
  const count = countOf($(this).attr('class'));
  const span = $('<span>').text(count).attr('class', 'num');
  $(this).prepend(span);
});

• 動作確認用 👉 https://codepen.io/su507/pen/wvjjpJO?editors=0010

Mapをカウンターとして使うこのやり方のメリットとしては、ランキングの種類が今後増えても全ランキングアイテムを取得してループするのでランキングの種類が増えるだけの変更に対しては修正は不要になることです。またランキングの種類が何種類あるのか（つまりクラス ranking<数字> の <数字>の最大値は何か）を知っている必要もありません。

追記

もし、各ランキングアイテムの class が

<li class="up ranking4">さしすせそ</li>

だったり

<li class="ranking4 down">さしすせそ</li>

などのように、ranking<数字> 以外のクラスも入ってくることがあり得る場合は上記のコードはそのままでは使えません。この場合は ranking4 であれば CSSクラスのほうは ranking のみにして 4 をdata-*属性で指定することにして、たとえば

<li class="up ranking" data-ranking-id="4">さしすせそ</li>

といったように修正したうえで、$('.ranking') で取れる各要素の data-ranking-id属性値をキーとして先述のカウンターを使えばよいかと思います。

Comments

[Cocode]

セレクタの[class^=ranking]の書き方がスマートで感動しました！勉強になりました🥺

ただ、それだと関係のないクラス、例えば「.ranking-container」とか「.rankingByCost」とかあれば、含まれてしまわないかな…？と心配しています！
正規表現みたいに「rankingから始まり、数字が1つまたは複数あり、それで終わる」という表現できたら最高ですが…！

[Cocode]

最後の方にカスタムデータ属性使いましょうと対策かいてくれてました！！
見落としてました失礼しました。

[退会済みユーザー]

コメントありがとうございます。本回答の主旨は「カウンターの実現にMapを使うのはどうでしょう？」という提案でしたので、ranking-container や rankingByCost などの「ranking 始まりだけれど ranking<数字> ではないクラス」が’あった場合のことまでは考えていませんでした。

[Cocode]

私の勘違いのコメントに優しいお返事をくださいましてありがとうございます…！
su507様と私の回答を総合して考えると、「.ranking」などの共通クラスをつけて処理した方がベターだと感じました。

そして順位を区別するために、
su507のおっしゃる通りカスタムデータ属性に数値をいれておくか、
クラス名に「.ranking-1」などを追加するか、ですかね。

非常に勉強になりました。ありがとうございました。

Answer 4

方法は2つありまして、

1. 対象の要素に同じクラス名をつける方法（例 .ranking）
2. 対象の要素に連番でクラス名をつける方法（例 .ranking1, .ranking2...）

動作確認サンプル： https://jsfiddle.net/ur4daeso/

同じクラス名の方法　.ranking

$('.ranking').each(function(i) {
	$(this).prepend('<span class="num">' + (i+1) + '</span>'); 
})

$('.ranking')

• この部分で、.rankingというクラス名を持つ要素を全て（上から順番に）取得しています。
• 取得した要素は配列みたいに格納されています。
  • [0番目の.ranking要素, 1番目の.ranking要素, 2番目の.ranking要素]

.each(function(i) {...})

• functionの引数（()の中）にiと書くと、jQueryの場合はループごとに自動でi++の処理をしてくれます。
• 取得した要素は全て↑のように配列みたいに格納されているので、これら1つずつに処理を行います。.each()
  • 英語でeachは「〜毎に」「1つずつ」という意味ですね。

'<span class="num">' + (i+1) + '</span>'

• functionの引数にかいたiは0番から始まります。
• ランキングの番号は1番から開始したいので、i+1で0+1, 1+1...という感じにします。

連番でクラス名をふる場合　.ranking1, .ranking2...

❗️❗️❗️ 注意 ❗️❗️❗️

●ランキング増えるたんびに書き直さないで済むようにしたい

この方法は質問者様の上記のご要望を 満たしていません。
ランキングが増えるたびに1ヶ所だけコードを変更する必要があります。

for (let i = 1; i <= 3; i++) {
	$('.ranking' + i).prepend('<span class="num">' + i + '</span>');
}

for()の意味はご存知ですか？この文法を知らない場合、その旨を教えてください。回答に内容を追加して説明します。

for (let i = 1; i <= 3; i++) {

• 連番が1番から始まってほしいので、let i = 1としました。
• 要素の数（例では3つ）だけループしてほしいので、i <= 3としました。
  • 要素の数が変わるたびに、ここの3という数字を変更する必要があります。

$('.ranking' + i)

• この部分で「.ranking」という文字列と、連番のiを結合し、.ranking1, .ranking2...というクラス名を表現します。
• そしてそのクラス名の要素を1つずつ取得しています。

同じクラス名と連番クラス名の処理の違い

• 同じクラス名をつける方法では、全部の要素を一度に取得して、1つずつ処理するという方法です。
  • 全部要素を取得して → 1つの要素を処理して → 次の1つの要素を処理して → 繰り返す
• 連番のクラス名の場合では、1つずつ要素を取得して処理しています。
  • 1つ要素を取得して＆処理して → 次の1つ要素を取得して＆処理して → 繰り返す