如何使用 for 循环而不是 $.each答案

【问题标题】：How to use a forLoop instead of $.each如何使用 for 循环而不是 $.each
【发布时间】：2014-11-10 22:48:37
【问题描述】：

这应该很容易，我只是无法在搜索中找到答案。我有一个图片库，里面有大约 400 张图片，这些图片是根据不同的数据过滤的。我正在使用 jquery 来读取 JSON 数据。它循环遍历数据以创建图像和标题。一切正常，但过滤速度非常慢。我读过的所有内容都说使用 for 循环而不是 $.each 来加速循环。问题是我之前没有使用过 for 循环，并且似乎无法正确编写代码（显然我不是 jquery 专家）。这是我正在使用的代码，它使用 $.each - 我如何用 forLoop 替换它？

var data = [
{"id":7,"width":54,"colorNumber":91380,"collection":"Adelle","colorName":"Agate","colorRange":"Green/teal","content":"material content goes here","repeat":"repeat","category":"category","origin":"origin"},
{"id":45,"width":54,"colorNumber":91381,"collection":"Adelle","colorName":"Emerald","colorRange":"yellow/gold/orange/red","content":"material content goes here","repeat":"repeat","category":"category","origin":"origin"},
{"id":13,"width":54,"colorNumber":93022,"collection":"Adromeda","colorName":"Galaxy","colorRange":"white/cream","content":"material content goes here","repeat":"repeat","category":"category","origin":"origin"}

……等等

];
$.each(data, function(i, obj) {
    $('#images').append(
"<li data-id='" + obj.colorNumber + "' data-type='" + obj.colorRange + "' id='image" + obj.colorNumber +"'>"
+
....etc

【问题讨论】：

发布您尝试的解决方案。此外，您的问题不会是循环，问题将是您在循环内调用 $('#...') 400 次，并在循环内附加到该元素 400 次。尝试构建单个 HTML 片段并在循环之后将整个附加到 one call 中
感谢您的反馈。我已经尝试了给出的每一个建议，但没有看到速度有任何改进，这让我相信这只是我正在加载的图像的数量和大小。我正在使用 Quicksand.js 插件进行过滤。我想知道它在过滤时创建一组重复数据的事实是否也是一个问题。对另一种方法有什么建议吗？

标签： jquery json for-loop

【解决方案1】：

HTML

<img id='image' src='https://jquery.org/resources/members/wordpress.png'/>

<script type='text/javascript'>//<![CDATA[ 
$(function(){
var data = [
    {
        "id":7,
        "width":54,
        "colorNumber":91380,
        "collection":"Adelle",
        "colorName":"Agate",
        "colorRange":"Green/teal",
        "content":"material content goes here",
        "repeat":"repeat",
        "category":"category",
        "origin":"origin"
    },
    {"id":45,"width":54,"colorNumber":91381,"collection":"Adelle","colorName":"Emerald","colorRange":"yellow/gold/orange/red","content":    "material content goes here","repeat":"repeat","category":"category","origin":"origin"},
    {"id":13,"width":54,"colorNumber":93022,"collection":"Adromeda","colorName":"Galaxy","colorRange":"white/cream","content":"material content goes here","repeat":"repeat","category":"category","origin":"origin"}];

var html = '<br/><ul>';
for (var i = 0; i < data.length; i++) {
  html += "<li data-id='" + data[i].colorNumber + "' data-type='" + data[i].colorRange + "' id='image" + data[i].colorNumber +"'>" + data[i].colorName + '</li>';
}
$('#image').after(html+'</ul>');
});//]]> 
</script>

FIDDLE

【讨论】：