用jQuery/JavaScript更新一堆HTML元素的最有效方法是什么？

我有一个局部视图，每次单击HTML元素时都会使用AJAX请求中的信息进行更新。局部视图保存一个人的个人资料，并具有一组不同的HTML元素（姓名、年龄等）

我有大约20个不同的元素需要在单击时更新-现在我手动为每个元素设置一个ID（例如：教授姓名、教授年龄、教授性别等）。不用说，它看起来非常糟糕和邋遢

有没有更有效的方法来更新大量HTML元素？

过去是一件很重要的事情，但您也可以查看其他选项。主干是一个很流行的库，但是您会发现有很多选择

简而言之，与通过jQuery手动更新HTML相比，模板库似乎将是一个更干净的解决方案。

我同意@Arthur的观点

您可以在和中找到模板。是。 您可以使用类而不是ID

那你就可以了

$(".class_name").method()

---

这将把“方法”应用于所有以“class_name”作为类的元素。

我个人会选择{{mustache}}模板，而不是jQuery提供的.each（）函数

迭代jQuery对象，为每个匹配的对象执行一个函数 元素

例如：

<ul>
  <li>Jack Sparrow</li>
  <li>33</li>
  <li>Male</li>
</ul>

function updateDate(arr){
  $( "li" ).each(function( index ) {
    $( this ).html(arry[i]);
  });
}

var el = document.getElementById("clickableElement");
el.addEventListener("click", function(){
  var response = {
    'name': 'Jack Sparrow',
    'age': 34,
    'gender': 'Male'    
  }
  updateDate([response.name, response.age, response.gender]);
});

杰克·斯派洛
三十三
男性

函数更新日期（arr）{
$（“li”）。每个功能（索引）{
$（this.html（arry[i]）；
});
}
var el=document.getElementById（“clickableElement”）；
el.addEventListener（“单击”，函数（）{
var响应={
“姓名”：“杰克·斯派洛”，
年龄:34岁,，
“性别”：“男性”
}
更新日期（[response.name，response.age，response.gender]）；
});

我认为jquery不是您想要的工具。这是一项可观察的工作。你可能想试试击倒JS

当剔除变量更改时，DOM将自动更新。 他们也有很多你可能想要使用的表单方法

<div data-bind="text: name"></div>

var myController = function()
{
    var self = this;
    this.name = ko.observable();

    $.ajax().done(function(data)
    {
        self.name(data.name);
    });
};

var myController=函数（）
{
var self=这个；
this.name=ko.observable（）；
$.ajax（）.done（函数（数据）
{
self.name（data.name）；
});
};