Как использовать forLoop вместо $ .each

Это должно быть легко, я просто не могу найти ответ на поиск. У меня есть галерея изображений с примерно 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

источник

2014-11-10 user3358661

Опубликовать ваше намерение решение принято. Кроме того, ваша проблема не будет циклом, проблема будет заключаться в том, что вы вызываете '$ ('# ...')' 400 раз внутри цикла и добавляете к этому элементу 400 раз внутри цикла. Попробуйте создать один фрагмент HTML и добавить * целую * вещь в * один вызов * после цикла – meagar

Спасибо за отзыв. Я пробовал каждый из предложенных предложений, но не вижу улучшения в скорости, что заставляет меня думать, что это просто количество и размер загружаемых изображений. Я использую плагин Quicksand.js для фильтрации. Мне интересно, является ли проблема, что он создает дублированный набор данных при фильтрации. Любые предложения по другому подходу? – user3358661

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

источник

2014-11-11 01:08:14 user86745458

Как использовать forLoop вместо $ .each

ответ

Смежные вопросы