javascript - 画面に追加する前に、javascript変数でjQuery .eachを使用する

Question

変数 $html に保存されているいくつかの基本的な html があり、ページに追加する前に each (jQuery) ステートメントを使用したい場合、クラスの各インスタンスについてこの文字列を調べて $html を修正したい場合.

これは私が考えていたことです...

$('.flipper', $html).each(function(){
    var frontContent    =   $(this).find('.front > .content');
    var backContent     =   $(this).find('.back > .content');
    $(this).append('<div class="background"><div class="content">' + frontContent.html() + '<div class="back">' + backContent.html() + '</div></div></div>');
    console.log($html);
});

これは実行されません-変数に格納されている要素ではなく、ページ上の要素を更新しようとしているためだと思います

each は引き続き使用できますか?

乾杯

Answer 1

$html は dom 要素参照ではなく文字列のようです... その場合、ループ内の要素に加えられた変更は元の文字列に反映されません。

次のようなものを試してください

var html = '';

var $html = $(html);
$('.flipper', $html).each(function () {
    var frontContent = $(this).find('.front > .content');
    var backContent = $(this).find('.back > .content');
    $(this).append('<div class="background"><div class="content">' + frontContent.html() + '<div class="back">' + backContent.html() + '</div></div></div>');
});

console.log($html[0].outerHTML);

デモ:フィドル

Answer 2

これを試して：

$($html).find('.flipper').each(....);