複数の要素に同じ処理と別の処理をしたい場合、同じ処理はfor文の外？中？

Question

前提

・複数の要素に同じ処理と各々別の処理をしたい
・別の処理はfor文で処理
同じ処理の実行場所で、以下の２つに違いはありますか？（処理の速度・可読性など）
①for文内で共通のクラス操作
②for文の外で共通のクラス操作

該当のソースコード

<button class="sec-1-btn" onclick="secBtn()">Section 1</button>
<div class="select q-a">Question A</div>
<div class="select q-b">Question B</div>
<div class="select q-c">Question C</div>

①for文の中で共通のクラス操作

const array1 = ['a','b','c']
function secBtn(){
   for (const value of array1) {
      $(".q-"+ value).addClass('red');   //or $(".select").addClass('red');
      $(".q-"+ value).data('value' ,value );
    }
};

②for文の外で共通のクラス操作

const array1 = ['a','b','c']
function secBtn(){
   $(".select").addClass('red');
   for (const value of array1) {
      $(".q-"+ value).data('value' ,value );
    }
};

Comments

[yambejp]

q-aかつq-bのクラスをもつ場合data-valueは何になる想定でしょうか？

[nana_ton]

はい、deta属性は以下になる想定です↓
<div class="select q-a" data-value="a">Question A</div>
<div class="select q-b" data-value="b">Question B</div>
<div class="select q-c" data-value="c">Question C</div>

[yambejp]

q-aかつq-bとは以下のようなイメージです。
<div class="select q-a q-b" data-value="a">Question</div>
<div class="select q-a q-b" data-value="b">Question</div>
<div class="select q-a q-b" data-value="a,b">Question</div>

クラスで処理する限り常についてくる問題です
data-valueはどうなるのが正解でしょうか？
q-aかつq-bは絶対に発生ししないという運用ルールなのでしょうか？

[nana_ton]

仰るようにq-aかつq-bは絶対に発生ししないという運用ルールになります！

Answer 1

ざっくりこんなかんじ
(jQueryは汎用性重視のため文法はなるべく古い書き方をしておきます)

const array1 = ['a','b','c']
function secBtn(){
  $(".select").addClass('red').attr('data-value',function(){
    for(var i=0;i<array1.length;i++){
      if($(this).hasClass('q-'+array1[i])){
        return array1[i];
      }
    }
  });
};

※ごめんなさい、ちょっとおかしかったの修正しました

Comments

[nana_ton]

ありがとうございます！
①②よりも上記が一番汎用性のあるコードということですね
とてもためになりました、、

Answer 2

jQueryを使っている時点で処理速度云々は無意味でしょう。バニラJSでということになります。
$(".select").addClass('red');でも内部的にはループ処理していますし。

ということで、考慮するなら可読性です。

可読性は個人差があると思いますが、提示の例なら②の方が可読性は高いと思います。

Comments

[nana_ton]

ご回答ありがとうございます！
処理速度はあまり変わらず（バニラJSが◎）、可読性が主な違いになるのですね。
これを機に、バニラJSとjQueryの処理速度の違いもきっちり学んでみます！