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

Question

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

我必须点击一下才能更新大约20个不同的元素-现在，我手动为每个元素设置了一个ID（例如，＃prof_name，＃prof_age，＃prof_gender等）。 不用说它看起来很糟糕而且草率。

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

Answer 1

jQuery模板曾经是一回事，但您也可以查看有关其他选项的讨论 。 骨干网对此很受欢迎，但是您会发现有很多其他选择。

简而言之，听起来模板模板将是比通过jQuery手动更新HTML更为简洁的解决方案。

Answer 2

我同意@Arthur

您可以在下划线和小胡子中找到模板

Answer 3

是。 您可以使用类而不是ID。

那你可以做

$(".class_name").method()

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

Answer 4

我个人会使用{{mustache}}模板，但此jQuery提供了.each（）函数。 https://api.jquery.com/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]);
});

Answer 5

我不认为jquery是您要寻找的工具。 这是一项可观察的工作。 您可能需要尝试Knockout JS。 http://knockoutjs.com/

当敲除变量更改时，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);
    });
};