jQuery - HTMLの文字列を更新

Question

jQueryを使用するWebページがあります。このアプリでは、HTML文字列を取り込む関数があります。このHTML文字列は動的に生成されます。しかし、HTMLの要素の1つでクラスリストを更新したいと思っています。私は特定のデータ-id値を持つこの文字列内の要素を見つけると、そのクラスのリストを更新する

<p>This is a test</p><div class="example" data-id="1">example</div> <p>This is only a test.</p> 

：HTML文字列の例は、このようなものになるだろう。

function updateHtml(html, id) { 
    var tree = $(html); 
    var updatedHtml = html; 

    var leaf = $(tree).find('div[data-id="' + id + '"]'); 
    if (leaf) { 
    $(leaf).attr('class', 'example complete'); 
    updatedHtml = $(tree).html(); 
    } 

    return updatedHtml; 
} 

あなたがフィドルを実行すると、あなたはクラスが実際に変更されないことに気づくでしょう：私の問題を特定するための努力で、私は次のコードが含まれ、このFiddleを作成しました。何故なの？私は何が間違っているのか分からない。上記のコードに基づいて期待しているように、フィドルの例はグレーからグリーンに変わることはありません。私は何が欠けていますか？

Answer 1

htmlを更新する必要はありません。次のようなクラスを追加することができます。

function updateClass() { 
 
    var $elm = $('#myElement'); 
 
    updateHtml($elm, 1) 
 
} 
 

 
function updateHtml($elm, id) { 
 
    var leaf = $elm.find('div[data-id="' + id + '"]'); 
 
    if (leaf) { 
 
     $(leaf).addClass('example complete'); 
 
    } 
 
}

.example { 
 
    background-color:lightgray; 
 
    border: solid 2px #000; 
 
    padding:12px; 
 
} 
 

 
.complete { 
 
    background-color:green; 
 
    color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="myElement"> 
 
     <p>This is a test</p> 
 
     <div class="example" data-id="1">example</div>  
 
     <p>This is only a test.</p> 
 
    </div> 
 
    <br /> 
 

 
    <button class="btn btn-primary" onclick="updateClass()"> 
 
     Run 
 
    </button> 
 
</div>

Answer 2

function updateHtml(html, id) { 
    $('div[data-id="' + id + '"]').addClass("complete").html(html); 
} 

Answer 3

私はフィドルにあなたの例を確認し、更新後、次のコードを試すことができ、それが動作するはずました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div id="myElement"> 
 
    <p>This is a test</p><div class="example" data-id="1">example</div> <p>This is only a test.</p> 
 
    </div> 
 
    <br /> 
 

 
    <button class="btn btn-primary" onclick="return updateClass();"> 
 
    Run 
 
    </button> 
 
</div> 
 
<script> 
 
function updateClass() { 
 
    var html = $('#myElement').html(); 
 
    
 
    var newHtml = updateHtml(html, '1'); 
 
    $('#myElement').html(newHtml); 
 
} 
 

 
function updateHtml(html, id) { 
 
    
 
    var updatedHtml = html; 
 
    var $html = $('<div />',{html:html}); 
 
    $html.find('div[data-id="' + id+'"]').addClass("example complet"); 
 
    
 
    return $html; 
 
} 
 
</script>