javascriptのthisに苦しんだ。closestの使い方も間違っていた。ajax jquery

実現したいこと

口コミに対するコメント機能を非同期処理する
例えでいうと、返信機能つき掲示板にあたります。

私の以前のソースコードでは、1つの口コミにコメントをしているのに、複数の口コミにそのコメントが 反映されていました。(更新するとDBデータが表示されるため正常表示にはなる。) この問題を解決したく、テラテイルで質問したところ回答いただけました。

はじめに、以下が修正し直した成功時の例です。(まだバグは少しある。)

  
$(document).on('click','.koment',function(){
    //function()のthisとdoneで使うthisは違うため変数に代入しておく
    var $_t = $( this );
    $.ajax({
        url:'/comment/comment',
        type:'POST',
        data:{
            name: $(this).closest('#kom').find('#komname').val(),
            comment: $(this).closest('#kom').find('#komtext').val(),
            review_shop_id: $(this).closest('#kom').find('#review_shop_id').val(),
            review_id: $(this).closest('#kom').find('#review_id').val(),
            created_at: new Date()
        },
        dataType: 'json'
    })
    // Ajax通信が成功したら発動
    .done(function(data, dataType){
        $_t.closest('li').find('.komlist').prepend(
            '<li class="r-list">'+
                '<div class="r-detail">'+
                    '<p class="r-name">'+ data['name'] +'</p>'+
                    '<p class="r-date">'+ data['created_at'] +'</p>'+
                    '<div class="r-body">'+ data['comment']+ '</div>'+
                '</div>'+
            '</li>'
        )
    })
});

テラテイルで学んだことは、 var $_t = $( this );$_t.closest('li').find('.komlist').prepend( の2つです。

1つ目
doneでthisを使うため変数に入れておくための
var $_t = $( this );にします。
なぜかというとfunction()のthisとdone{}で使うthisは違うものだそうです。 試しに$(this).closest('li').find('.komlist').prepend( と書いてみたところやはり動きませんでした。jsのthisに関してはもう少し掘り下げていこうと思いました。

2つ目
closestの選択要素を間違って認識してました。 以前の間違っていたコード
$_t.closest('.replyList').find('.komlist').prepend() closestは開始要素から最も近い親要素を選択するものです。 しかし、私は兄弟要素であるものを選択していて、エラー文も出ないエラーで迷ってました。こちらもテラテイルで知ったことです。

テラテイル感謝です本当に