pushでinputタグないのdataを扱いたい

Question

前提・実現したいこと

チェックボックスにチェックが入った
inputタグの内容を配列で取り出し、そのinputないの数値データ（data-distance）を元に
下降昇降の並び替えをしたいです。

初学者のため、質問の意図や情報が少ないかも知れませんが
お力添えいただければ幸いです。

該当のソースコード

<label>
        <input type="checkbox" name="member" data-distance=3 value="名前A3" class="aGroup">名前A3
    </label>
    <label>
        <input type="checkbox" name="member" data-distance=1 value="名前A1" class="aGroup">名前A1
    </label>
    <label>
        <input type="checkbox" name="member" data-distance=2 value="名前A2" class="aGroup">名前A2

<label>
        <input type="checkbox" name="member" data-distance=1 value="名前B1" class="bGroup">名前B1
    </label>
    <label>
        <input type="checkbox" name="member" data-distance=2 value="名前B2" class="bGroup">名前B2
    </label>

var vals = []; // 配列を定義
    $('input[name="member"]:checked').each(function() {
        vals.push( $(this).val()); // 配列に値を追加

        console.log(vals);
=> ["名前A3", "名前A1", "名前A2", "名前B1"]

        // グループAの配列だけをピックアップ
        var aGroup = vals.filter(item => item.match(/A/));

        console.log(aGroup);
=> (3) ["名前A3", "名前A1", "名前A2"]

        function compareFunc(a, b) {
            return a.distance - b.distance;
          }
          aGroup.sort(compareFunc);

          console.log(aGroup);
=> (3) ["名前A3", "名前A1", "名前A2"]
本来はここで["名前A1", "名前A2"、"名前A3"]この順番にしたい。

...この先もfunctionの中身が続きます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yambejp]

A1とB1が同じdata-distanceですがgroupをまたいだデータ取得は
ない前提でしょうか？

[hemuu]

A,Bを分けて処理をします。
つまり、A,Bが混合されてチェックが入っていても
Aと Bに分けて処理をしていきたいです。

[yambejp]

わけての意味がわかりません
[
["名前A1", "名前A2"、"名前A3"],
["名前B1", "名前B2"],
]
のように常に二重配列になるのでしょうか？
{
groupA:["名前A1", "名前A2"、"名前A3"],
groupB:["名前B1", "名前B2"],
}
のような感じでしょうか？

[hemuu]

チェックされた項目は["名前A２", "名前B1""名前A１", "名前B２"]のように混合されて取得し
filterを使って、この場合Aグループだけを抽出したいです。
["名前A２", "名前A１"]
その後、distanceの数字にが小さい順に配列を並べたいです。
["名前A１", "名前A２"]

[yambejp]

クラスで指定されたgroupAだけ抽出するならfilterするだけ無駄なので
私の回答の通りセレクタにクラスを指定するのが妥当です

Answer 1

jQueryならこんな感じで

$(function(){
  $('#chk').on('click',function(){
    var res=$('[name="member"]:checked.aGroup').get().sort(function(x,y){
      return $(x).data('distance')-$(y).data('distance');
    }).map(function(x){
      return $(x).val();
    });
    console.log(res);
  });
});

Comments

[hemuu]

非常にご丁寧な解説と具体的なコードでとても理解が深まりました。
他の方々にも、とても参考になるご回答をいただき助けていただきましたが
今回はyambejpをベストアンサーに選ばせていただきました。
ありがとうございました。

Answer 2

質問文のコードはチェックされたチェックボックスの個数の回数実行されますけども、たぶんチェックされたチェックボックスの集合を対象に一度だけ実行したいのだろうと推測します。

data-distance属性を参照するには要素が必要になるので、要素のリストのまま処理を進めるのが楽だと思います。

let checked = [...document.querySelectorAll('input[name="member"]:checked')];
// グループAの配列だけをピックアップ
let aGroup = checked.filter(element => element.value.match(/A/));
aGroup.sort((a, b) =>
    Number(a.dataset.distance) - Number(b.dataset.distance)
);
console.log(aGroup.map(element => element.value);

Comments

[hemuu]

おっしゃる通り、チェックされた個数だけ処理をしたい訳ではありません。
それを解決する方法が、elementでの処理ということでしょうか？

[int32_t]

いえ、それらは関係ありません。
jQueryのeach()は、マッチしたチェックボックスそれぞれに1回ずつ関数を呼ぶので、この場合は不適切です。

[hemuu]

なるほど！とても理解しやすいご回答有難うございます。
それではint32_t様の場合
$('input[name="member"]:checked').each(function() {
をどのように書かれるのでしょうか。
可能であれば、教えていただけませんでしょうか。

[int32_t]

既に回答に書いてある通りです。
「let checked =」の行が「$().each(function() { vals.push(...)」に相当します。(文字列ではなくチェックボックスのリストにしてますが)

[hemuu]

var vals = []; // 配列を定義
$('input[name="member"]:checked').each(function() {
vals.push($(this).data()); // 配列に値を追加

ここで[]の中にpushで入れている部分を
let checked = [...document.querySelectorAll('input[name="member"]:checked')];
で既に[]内にinput内の要素を丸々格納しているので

私のコードの
var vals = []; // 配列を定義
$('input[name="member"]:checked').each(function() {
vals.push($(this).data()); // 配列に値を追加

この部分が必要ないという解釈で正しいでしょうか。

[int32_t]

そのとおりです。

[hemuu]

ありがとうございます！完全に理解することができました。

Answer 3

valsという配列にvalしか入れていないので、
valを格納するとき一緒にdata-distanceを連想配列として格納するか、
もしくは、比較の段階でvalが一致するinputを探してdata-distanceを取得するか。
どちらかになるかと思います。

どちらを選ぶかはお好みでどうぞ。
僕は後の処理でも使うなら連想配列で持っておくかなぁという感じです。

Comments

[hemuu]

ご回答有難うございます。
連想配列として、data-disitanceを格納する方法が知りたいのですが
その場合
var vals = []; // 配列を定義の部分を
var vals = {}; // 配列を定義と
{}にするのでしょうか。

また、data-distanceを格納するためのコードは
vals.push( $(this).val());
vals.push( $(this).data());と書くということでしょうか。
無知で申し訳ございません。

[退会済みユーザー]

> var vals = [];
[]のままで大丈夫ですよ。中に入れるものを変数から配列に変えます。
[$(this).val() , $(this).data('distance') ]になるかな。
ただ取り出すときにvals[0][0]とかvals[0][1]などになります。
※0番目の配列の0番目の要素、0番目の配列の1番目の要素

valsの中身が連想配列（配列の配列）になると取り出すために少しコードを変える必要があるので、
めんどくさいと感じたら、比較するところで直接取得して処理する方法を…やる人は少ないと思いますが。

以下おすすめです。

yambejpさんが例示してくれているコードを感謝を述べつつ保存して、
コードを減らしながら処理を追うと理解が深まるかもしれません。
メソッドチェーンを切ってconsole.log()で値を見ながら何をしているのかを考察してみましょう。

[hemuu]

ご丁寧な解説本当にありがとうございます。
そして、とても分かりやすく学びとなりました。

amiya-seさんからの学びはとても多かったのですが、申し訳ございませんが
今回はyambejpをベストアンサーに選ばせていただきます。

本当にありがとうございました。