Самый эффективный способ скрыть/показать до 100 элементов DOM?

Предположим, что у вас есть не более 100 элементов, в которых их типы и формат не изменяются, но их контекст делает. (Они в основном строки)
Эти строки вокруг привязаны к входу и будут меняться по мере ввода пользователем.

Каким будет наилучший подход к максимальной производительности? Повторное использование элементов, не изменяя их контекста? Что-нибудь еще?

Изменить, уточнение:
Алгоритм поиска не связан, но я использую структуру MVVM (angularjs), поэтому поиск, который я делаю, выполняется на JavaScript и не является узким местом; после получения результатов я обновляю соответствующим образом.

Также мне не нужно искать элементы над DOM, у меня есть ссылки на элементы, я хочу минимизировать время выполнения во время обновления.

Ответ 1

Для кода это будет сделано,

$(element).css('display' , 'none');

Но проблемы с производительностью зависят от того, как вы находите эти элементы, Ключ состоит в том, чтобы обернуть элементы в контейнер и выполнить поиск только внутри этого контейнера:

$('container').find('your_elements').css('display' , 'none');

ИЛИ

$('your_elements', 'container').css('display' , 'none');

Сделаем это.

Никогда:

$('your_elements').css('display' , 'none');

JS будет искать весь домен для этого

Ответ 2

Если у вас есть только 100 элементов, это не имеет большого значения. Просто установите свойство display своего объекта стиля, чтобы показать или скрыть их.

Ответ 3

Используйте уникальный идентификатор всех строк и используйте jquery для управления им, изменив их значение.

Ответ 4

Лучший способ может быть, обернуть все эти элементы в div и задать стиль для внешнего div (при условии, что они вместе, как вы сказали, это строки)

<div id="wrapper">
   <!-- Your dom elements -->
</div>

Установите правильный стиль для вашего обертки div.

И, как правило, я не думаю, что нам нужно беспокоиться о перфомансе на таких вещах, как очень тривиальные операции.

Ответ 5

Я думаю, создайте класс CSS с отображением none и примените этот класс к элементам TR, выполнив это, вы сможете использовать селектор jquery для последующего использования. $('TR.hidden') и if(!$('TD').hasClass('hidden'))