0

前提・実現したいこと

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を使っています。

1 件の回答 1

2

参照された3つのページには、each()が何か値を返すとは書かれていないようです。公式のドキュメントにもjQueryオブジェクトが返るとは書いてありますが何を表現したオブジェクトなのかは書いていないようです。また、コールバック関数の戻り値は「falseを返すとループを中断する」と書かれています。

期待される動作をするのは、each() ではなく map() ではないでしょうか。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。