each文でセレクタを複数指定した場合の動きについて

Question

前提・実現したいこと

each文でループを回した際の挙動がイメージと違っており
セレクタの指定の順番に関係なく、#a、#aのinput、#b、#bのinputの順番で処理されるようなのですが
なぜこういう動きになるのでしょうか。
（input,#a,#bで順番に処理されることを期待してました）
どなたかわかる方、ご教授のほどお願い申し上げます。

該当のソースコード

<form action="">
  <ul class="" id="a">
    <li><label><input type="checkbox" name="test" value="a1"><p class="ttl">aaaa◯◯◯◯◯</p></label></li>
    <li><label><input type="checkbox" name="test" value="a2"><p class="ttl">aaaa◯◯◯◯◯</p></label></li>
    <li><label><input type="checkbox" name="test" value="a3"><p class="ttl">aaaa◯◯◯◯◯</p></label></li>
    <li><label><input type="checkbox" name="test" value="a4"><p class="ttl">aaaa◯◯◯◯◯</p></label></li>
  </ul>

  <ul class="" id="b">
    <li><label><input type="checkbox" name="test" value="b1"><p class="ttl">bbbb◯◯◯◯◯</p></label></li>
    <li><label><input type="checkbox" name="test" value="b2"><p class="ttl">bbbb◯◯◯◯◯</p></label></li>
    <li><label><input type="checkbox" name="test" value="b3"><p class="ttl">bbbb◯◯◯◯◯</p></label></li>
    <li><label><input type="checkbox" name="test" value="b4"><p class="ttl">bbbb◯◯◯◯◯</p></label></li>
  </ul>
</form>

$(window).load(function(){
  $('input,#a,#b').each(function(){

  console.log("val:"+$(this).val());
});
})

試したこと

$('input,#a,#b').each(function(){
の中身を書き換えたりなどしてみました。

Answer 1

なぜこういう動きになるのでしょうか。

セレクタで一括して選択すると、それはHTMLに登場する順で並びます。

Comments

[sanco]

ありがとうございます！
重ねた質問となり恐縮ですが、これはeach文だから、という理由ではなく
jsの基本概念的なものでしょうか？

[maisumakun]

どちらでもありません。jQueryの動作仕様です。

[sanco]

納得できました。
ありがとうございました！！