JavaScript - Самый быстрый способ показать и скрыть много элементов списка
json_decode поддерживают второй аргумент, когда он установлен на TRUE, он возвратит Array вместо stdClass Object. Проверьте страницу Manual функции json_decode, чтобы увидеть все поддерживаемые аргументы и их детали.
Например попробуйте это:
$json_string = 'http://www.example.com/jsondata.json';
$jsondata = file_get_contents($json_string);
$obj = json_decode($jsondata, TRUE); // Set second argument as TRUE
print_r($obj['Result']); // Now this will works!
6 ответов
Вы можете сохранить элементы непосредственно в массиве поэтому вам не нужно выполнять сотни поисков селекторов CSS. Тогда вместо $ ("ul # theList li #" + i) вы просто выполняете liArray [i] .
FYI, "ul # theList li # < i> " эквивалентно просто " # ", поскольку идентификаторы элементов (предположительно) уникальны. Вам не нужен дополнительный контекст.
Для каждого отдельного .show () и .hide () вызов функции, вы вызываете перерисовку в браузере.
Вы должны попробовать кэшировать свой селектор и использовать context:
var targetList = $("ul#theList");
и заменить:
$("ul#theList li#"+i).show();
с
$("#"+i, targetList).show();
Это уменьшит количество раз, когда jQuery будет перемещаться по всей DOM.
Вы профилировали свой код?
Никогда не предполагайте, какая часть кода работает медленно, профилируйте код в FireBug (при условии, что вы используете Firefox) и настройте код, который работает медленнее.
Вы можете попробовать скрыть список во время сброса всех элементов списка. Это может предотвратить некоторые перерисовки.
Также рассмотрите возможность использования просто
$("ul#theList li#"+i).attr("display","none");
$("ul#theList li#"+i).attr("display","block");
, а не hide () и show (), поскольку они могут принимать параметр скорости для необычной анимации. Не знаю, будут ли они медленнее, если вы им не пользуетесь, но стоит проверить.
Скорее всего, это медленно, потому что вы просите jQuery пройти через DOM несколько сотен раз. Если вместо этого вы создали строку со всеми идентификаторами, разделенными запятыми, вы могли бы выбрать и скрыть / показать их все одним действием.
Позвольте мне немного пояснить, что я имел в виду, поскольку если вы просто выполните $ (string_of_elements), jQuery будет вызвать обход всей модели DOM для каждого элемента.
$("ul#theList").find(string_of_elements).show()
Используя этот синтаксис, jQuery сначала найдет элемент ul, а затем нужно будет только пройти его, чтобы найти элементы li. Теперь, если у вас есть оба списка, преобразованные в строку, вы можете сделать кое-что действительно изящное:
$("ul#theList")
.find(string_of_elements_to_show).show().end()
.find(string_of_elements_to_hide).hide();
Использование этого синтаксиса и связывание двух событий имеет еще одно преимущество. Фактическое отображение и скрытие будет происходить одновременно, а не скрытие и отображение одно за другим.