如何根据模运算符将对象属性分配给动态元素答案

【问题标题】：how can I assign object properties to dynamic elements based on the modulus operator如何根据模运算符将对象属性分配给动态元素
【发布时间】：2012-03-29 18:17:05
【问题描述】：

我创建了一个包含 <h2> & <h3> 的迷你模板，我创建了一个循环，每次都添加 .inner i%2 === 0，我想做的是拆分输出的数据以遵循相同的规则因此，当i%2 === 0 添加 .inner 并拆分对象属性时，每个 .inner 应显示 2 个模板化对象属性。谁能建议如何实现这一目标？我的模板项目似乎也返回未定义？

在这里演示http://jsbin.com/otirax/13/edit

【问题讨论】：

您应该使用 data[i].name、age 等，因为您正在遍历一个数组。

标签： javascript jquery object templating

【解决方案1】：

您的代码可以通过多种方式进行改进。这里的选择器：

$('.inner').append(temp);

实际上应该是$(".inner:last")，否则它会影响到目前为止创建的所有“.inner”对象。更好的是，将新创建的 div 保存在变量中：

inner = $('<div class="inner"></div>').appendTo($('#ctn'));

然后简单地使用 var，从而节省了昂贵的选择器操作：

inner.append(...);

另一个改进是自动化模板渲染。考虑以下函数：它从对象中填充任意 {{tags}}：

  function render(template, values) {
    return template.replace(
      /{{(\w+)}}/g, 
      function($0, $1) { return values[$1] });
  }

完整示例：http://jsbin.com/iviziz/2/edit .如果您有任何问题，请告诉我们。

【讨论】：

【解决方案2】：

模板项似乎返回未定义：

var temp = template.replace(/name/ig, data.name)
    .replace(/age/ig, data.age);

由于它们是数组，因此应该如下所示。

var temp = template.replace(/name/ig, data[i].name)
    .replace(/age/ig, data[i].age);

【讨论】：

【解决方案3】：

我认为无歌鸟的回答很清楚，但只是为了给出正确的答案，而不是

var temp = template.replace(/\{\{name\}\}/ig, data.name)
    .replace(/\{\{age\}\}/ig, data.age);

你需要有

var temp = template.replace(/\{\{name\}\}/ig, data[i].name)
    .replace(/\{\{age\}\}/ig, data[i].age);

你可以在这里看到一个例子http://jsbin.com/otirax/16/edit

除此之外，理论上不应将“模板”放在脚本标签内，因为它不是脚本。

【讨论】：

嘿，这真的很有帮助，谢谢，不过还有 1 个问题。如何确保将对象 0 + 1 添加到 .inner(first) 并将 2+3 添加到 .inner(second)？目前 0,1,2,3 排在第一位，然后 2+3 排在第二位？
这可能是你想要的jsbin.com/otirax/17/edit