使用 jquery 的 forEach 和 templatePlugin 追加 <div>
Append <div> using jquery's forEach and templatePlugin
我为以下问题苦苦挣扎了几个小时:
- 使用 jquery 的 forEach 方法遍历对象
- 对于每一个object元素,都应该使用一个模板,模板中也填充了信息。我正在使用的插件:jquery-tempalte
- 对于每个对象,模板应附加到
<div>
不幸的是,只有最后一个对象元素被可视化并加载到 DOM。在之前的步骤中创建的所有其他 div 都被覆盖。
在这里找到一个 jsFiddle,它演示了我的问题:http://jsfiddle.net/7oq053od/1/
你知道我错过了什么吗?
很高兴得到一些反馈:)
用于附加多个 div。您应该创建一个包含所有子 div 的主容器,并且在显示时,每个 div 元素都将被创建并每次附加到主容器。
这是示例代码:
<div id="container"></div>
//now in javascript create child div elements and append to main container
<script>
for(var items in data)
{
var newChild = $(document.createElement('div'));
$(newChild).css({
//some css code
});
//now appending it to main container
$('#container').append(newChild);
}
</script>
模板插件似乎将模板值应用于同一元素。如果您克隆该元素,您的脚本就可以运行。
$.each(results.features, function (key, value) {
$("#homeView").clone().loadTemplate($("#template"), {
geoFenceName: value.attributes.title,
geoFenceDescription: value.attributes.description
}).appendTo('#fences');
});
查看更新 fiddle here
从 github 网页的 Options 部分,您可以看到第三个参数 append
属性 设置为 true
。
只需考虑像这样将它添加到您的脚本中:
$.each(results.features, function (key, value) {
$("#homeView").loadTemplate($("#template"), {
geoFenceName: value.attributes.title,
geoFenceDescription: value.attributes.description
}, {append: true});
});
这是工作 JsFiddle.
问题是 loadTemplate
函数覆盖了 div。您可以通过克隆模板容器然后将其附加到“#homeWiew”来解决这个问题。
我从你的 jsfiddle 创建了一个对我有用的 fork:
我为以下问题苦苦挣扎了几个小时:
- 使用 jquery 的 forEach 方法遍历对象
- 对于每一个object元素,都应该使用一个模板,模板中也填充了信息。我正在使用的插件:jquery-tempalte
- 对于每个对象,模板应附加到
<div>
不幸的是,只有最后一个对象元素被可视化并加载到 DOM。在之前的步骤中创建的所有其他 div 都被覆盖。
在这里找到一个 jsFiddle,它演示了我的问题:http://jsfiddle.net/7oq053od/1/
你知道我错过了什么吗?
很高兴得到一些反馈:)
用于附加多个 div。您应该创建一个包含所有子 div 的主容器,并且在显示时,每个 div 元素都将被创建并每次附加到主容器。 这是示例代码:
<div id="container"></div>
//now in javascript create child div elements and append to main container
<script>
for(var items in data)
{
var newChild = $(document.createElement('div'));
$(newChild).css({
//some css code
});
//now appending it to main container
$('#container').append(newChild);
}
</script>
模板插件似乎将模板值应用于同一元素。如果您克隆该元素,您的脚本就可以运行。
$.each(results.features, function (key, value) {
$("#homeView").clone().loadTemplate($("#template"), {
geoFenceName: value.attributes.title,
geoFenceDescription: value.attributes.description
}).appendTo('#fences');
});
查看更新 fiddle here
从 github 网页的 Options 部分,您可以看到第三个参数 append
属性 设置为 true
。
只需考虑像这样将它添加到您的脚本中:
$.each(results.features, function (key, value) {
$("#homeView").loadTemplate($("#template"), {
geoFenceName: value.attributes.title,
geoFenceDescription: value.attributes.description
}, {append: true});
});
这是工作 JsFiddle.
问题是 loadTemplate
函数覆盖了 div。您可以通过克隆模板容器然后将其附加到“#homeWiew”来解决这个问题。
我从你的 jsfiddle 创建了一个对我有用的 fork: