$(this)の値の移り変わりに関して

javascrpt(jQuery)でコールバックして式が長くなると$（this）値に入っているものが変わってきます。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js'></script>
<title>documentwrite</title>
</head>
<body>

<p id="panel1">パネル１</p>
<p id="panel2">パネル2</p>
<p id="panel3">パネル3</p>




<script src="/js/jquery-2.2.4.min.js"></script>
<script>

$(function(){
    $("p").on("click",function(e){
        let E = $(this);
        let D;
        $("#panel1,#panel2,#panel3").each(function(){
            if(e.target === $(this).context){
                D = $(this);
                $(this).text("ヒットしました。");
            }
        })
        console.log(E);
        console.log(D);
    })
});


</script>
</body>
</html>

    $("p").on("click",function(e){
        let E = $(this);
        let D;

このときの$(this)にはクリックされた"p"が代入されている。

        $("#panel1,#panel2,#panel3").each(function(){
            if(e.target === $(this).context){
                D = $(this);
                $(this).text("ヒットしました。");

このときの$(this)にはeach関数でそれぞれの("#panel1,#panel2,#panel3")を見ていっている状態です。
("#panel1")を見ているときはそれが$(this)になります。

javascipt(jQuery) $(this)の代入値について

$(this)の値の移り変わりに関して