jQuery migrateプラグインでjQuery（htmlString）を使用できない

Question

jQueryバージョン1.7.2を使用していた古いソフトウェアのアップグレードを進めています。私はこれをバージョン1.12.1にアップグレードしました。新しいプラグインが追加され、新しいバージョンのjQueryが必要なためです。

例えば、jQueryの（htmlString）形式を使用していますjQueryのの負荷があります：$（htmlStringが）、それは述べてバージョン1.9に償却し、https://jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstringでアップグレードガイドを読んでいたよう

var html = $("<div>"); 

    // Prepare the <div> of comments 
    $.each(data.comments, function() { 
     console.log(this); 
    html.append(
     $("<div>").attr("class", "comment").html(
     $("<div>").attr("class", "comment-profile-pic").html("").after(
      $("<div>").attr("class", "comment-text").html(
      $("<h1>").html(
       this.full_name + " at " + this.started_datetime 
      ).after(
       $("<p>" + this.text + "</p>") 
      ) 
     ) 
     ) 
    ) 
    ); 
    }); 

に見えます

jQuery Migrateプラグインを使用すると、$（） "に渡された文字列が" look "に渡されているかどうかを判断するための古い規則が使用されますHTMLのように "。

jQueryマイグレーションプラグインバージョン1.4.1を添付しましたが、差異を生じさせておらず、セレクタでHTMLを認識できません。

EDIT： jQueryをバージョン1.8.0に戻してみましたが、期待どおりに動作しますが、バージョン1.9.0で破損します。つまり、v 1.9へのアップグレードでは間違いなく問題になります。

さらにテストを行った後、セレクタにhtmlを渡すと、$("<div>").attr("class", "comment")のような処理をしても、上記の例のようにネストしても機能しないことがわかりました。

HTMLをセレクタに渡すすべてのコードを書き直すことなくこの問題を回避する方法を知っている人はいませんか？

Answer 1

アップグレードガイドを読めば、あなたがHTML文字列が<文字で開始されない場合は、これが唯一の問題であることがわかります：1.9のよう

を、文字列だけに考えられていますより小さい（ "<"）文字で始まる場合はHTMLにしてください。 Migrateプラグインを使用すると、1.9より前の動作を復元できます。文字列がHTMLであることがわかっていても、HTMLタグではない任意のテキストで始まる場合は、jQuery.parseHTML（）に渡して、マークアップを表すDOMノードの配列を返します。言われて、あなたがaddClass()、ないattr('class', 'foo')を使用する必要があり、そしてあなたが本当にhtml()方法にjQueryオブジェクトを渡すべきではないと

。 documentationをチェックすると、HTML文字列または関数を受け付けることがわかります。あなたのコードがある - 何の問題がここにはありません

var data = { 
 
    comments: [{ 
 
    text: 'foo1', 
 
    full_name: 'name1', 
 
    started_datetime: 'started1' 
 
    },{ 
 
    text: 'foo2', 
 
    full_name: 'name2', 
 
    started_datetime: 'started2' 
 
    }] 
 
} 
 

 
var $parent = $("<div>").appendTo('body'); 
 

 
$.each(data.comments, function() { 
 
    var $comment = $("<div>").addClass('comment').appendTo($parent); 
 
    var $profilePic = $("<div>").addClass('comment-profile-pic').appendTo($comment); 
 
    $("<div>").addClass('comment-text').html(`<h1>${this.full_name} at ${this.started_datetime}</h1><p>${this.text}</p>`).insertAfter($profilePic); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>