前提・実現したいこと
JavaScriptを学習中の初学者です。
JavaScript・jQueryで思うような値が返ってこないため、悩んでいます。
発生している問題・エラーメッセージ
下記ソースコードの出力1と出力2が同様の結果を返すと考えましたが、以下のように異なる結果が出力されてしまいます。
出力1: テスト1
出力2: <input class="waypoint" type="text" name="waypoints[]">
jQueryのeachは、配列のすべての要素に対して同様の動作を行うものと認識していたため、出力1と出力2が同様の結果を返すと考えていました。
また、eachがどのようなものであれ、出力2でreturn waypoint.value;
としているのにvalueではなくタグが出力されるのも理解できず困っています。
① なぜ出力1と出力2が異なる結果を返すのか?
② なぜ出力2でvalueではなくタグが返されるのか?
以上の2点について、ご教授いただきたいです。
該当のソースコード
<form action="" method="">
<input class="waypoint" type="text" name="waypoints[]"></input>
<input class="waypoint" type="text" name="waypoints[]"></input>
<input class="waypoint" type="text" name="waypoints[]"></input>
<button type="button" class="btn-ajax">ボタン</button>
</form>
それぞれのinputにはテスト1, テスト2, テスト3を入力
$(function(){
$('.btn-ajax').on('click', function() {
var tests = $('.waypoint').each(function(index, waypoint){
console.log(waypoint.value); // 出力1
return waypoint.value;
});
console.log(tests[0]); // 出力2
});
});
試したこと
以下を参照しました。
http://js.studio-kingdom.com/jquery/traversing/each
https://techacademy.jp/magazine/9464
https://www.sejuku.net/blog/33609
補足情報(FW/ツールのバージョンなど)
jQuery:
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
Bootstrapを使っています。