jQueryでHTMLの要素を並べ替えて順位付けするsort関数

jQueryの.sort()や.attr()を使ってHTMLの要素を並べ替えて順位付けします。
WP-Queryで取得したカスタムフィールドの情報を変数に格納してHTMLの表の<tr>に設定し、CSSのidに数字を自動的に付与して、そのidの数字でjQueryを使って並べ替えを行い、順位付けします。

ページ内リンク

WordPressのWP-Queryでカスタムフィールドの値の配列を変数に格納してfor文で記事情報取得を繰り返しjQueryで順位付け。
のコードの93-101行目にこのjQueryのコードがあります。

WordPressのWp-Queryでカスタムフィールドの値の配列の合計を足し算してループ外で計算 | HaradaWeb
には214-227行目に「<tr>」があります。

jQueryのコード

<div><script>
jQuery('table.team').html(
  jQuery('table.team tr').sort(function(a, b) {
    var x = Number(jQuery(a).attr("id"));
    var y = Number(jQuery(b).attr("id"));
    return y - x;
  })
  );
</script></div>

コードの解説

1行目の「<div><script>」はWordPressの投稿・固定ページ内でjQueryを使うときは必要です。

2行目「jQuery(‘table.team’).html(」は「<table class=”team”>」のHTMLを取得します。

3行目「jQuery(‘table.team tr’).sort(function(a, b) {」は「<table class=”team”>」の「<tr>」要素を比較して並べ替えます。

4-5行目「var x = Number(jQuery(a).attr(“id”));var y = Number(jQuery(b).attr(“id”));」は「.sort(function(a, b)」の「<tr>」に付与されているCSSのid名を取得し変数xと変数yに「Number」数値として格納します。
つまり「<table class=”team”>」の「<tr>」に設定されているCSSのid名を数値として取得するという事です。

6行目「return y – x;」は「y-x」が正の数になると変数xは変数yより後ろにソートされ、負の数になると前にソートされ、降順になります。
反対の「return x – y;」とすると昇順になります。

これで「<table class=”team”>」内全ての「<tr>」がCSSのidの数値で比較されて降順で並べ替えられます。

.attr()の役割

「.attr()」は例えば「.attr(‘id’,’abcd’)」で要素に「id=”abcd”」を追加することができる働きがあるのですが、このコードで使用している様に「$(this).attr(“id”);」でid名を取得する事もできます。

関連記事

jQueryのコード

コードの解説

.attr()の役割