javascript – jQuery – 更新HTML字符串

我有一个使用jQuery的网页.在这个应用程序中,我有一个接收HTML字符串的函数.此HTML字符串是动态生成的.但是,我知道我想更新HTML中的一个元素的类列表. HTML字符串的示例如下所示：

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

我想在此字符串中找到具有特定data-id值的元素,并更新其类列表.为了解决我的问题,我创建了这个Fiddle,其中包括以下代码：

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;
}

当您运行小提琴时,您会注意到这些类实际上并没有改变.为什么不？我不知道我做错了什么.小提琴中的例子永远不会从灰色变为绿色,就像我根据上面的代码所期望的那样.我错过了什么？

解决方法:

您不需要更新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>