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

【问题标题】：Most efficient way to update a bunch of HTML elements with jQuery / JavaScript?使用 jQuery / JavaScript 更新一堆 HTML 元素的最有效方法？
【发布时间】：2016-02-14 07:34:24
【问题描述】：

每次单击 HTML 元素时，我都会使用来自 AJAX 请求的信息更新部分视图。部分视图包含一个人的个人资料，并且有一堆不同的 HTML 元素（姓名、年龄等）

我有大约 20 个不同的元素需要在点击时更新 - 现在我手动为每个元素设置一个 ID（例如#prof_name、#prof_age、#prof_gender 等）。不用说它看起来很糟糕和草率。

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

【问题讨论】：

标签： javascript jquery html ajax

【解决方案1】：

jQuery templates 曾经是一件事，但您也可以查看this discussion 了解其他选项。 Backbone 是一个流行的库，但您会发现有很多替代方案。

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

【讨论】：

【解决方案2】：

我同意@Arthur

您可以在underscore 和mustache 中找到模板

【讨论】：

【解决方案3】：

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

那你就可以了

$(".class_name").method()

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

【讨论】：

【解决方案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]);
});

【讨论】：

【解决方案5】：

我不认为 jquery 是您正在寻找的工具。这是一个 observable 的工作。你可能想试试 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);
    });
};

【讨论】：