Cách hiệu quả nhất để ẩn/hiển thị tối đa 100 phần tử DOM?

Question

Giả sử rằng bạn có tối đa 100 phần tử trong đó các loại và định dạng của chúng không thay đổi nhưng ngữ cảnh của chúng không có. (Về cơ bản chúng là hàng)
Những hàng này xung quanh ràng buộc với đầu vào và sẽ thay đổi khi người dùng nhập.

Cách tiếp cận tốt nhất cho hiệu suất tối đa là gì? Sử dụng lại các yếu tố, giữ tất cả nhưng thay đổi bối cảnh của họ? Còn gì nữa không?

Chỉnh sửa, làm rõ:
Các thuật toán tìm kiếm không liên quan nhưng tôi sử dụng khung MVVM (angularjs) để tìm kiếm tôi đang làm là trên JavaScript và không phải là một nút cổ chai; sau khi nhận được kết quả, tôi cập nhật cho phù hợp.

Ngoài ra tôi không cần phải tìm kiếm các phần tử trên DOM, tôi có tham chiếu đến các phần tử, tôi muốn giảm thiểu thời gian chạy trong khi cập nhật.

Answer 1

Đối với mã, điều này sẽ làm,

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

Nhưng vấn đề hiệu suất phụ thuộc vào cách bạn đang tìm kiếm những yếu tố, Điều quan trọng là để bọc các yếu tố vào một container, và tìm kiếm các yếu tố trong container mà chỉ:

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

HOẶC

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

Sẽ làm điều đó.

Không bao giờ làm:

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

JS sẽ phải tìm kiếm toàn bộ dom cho rằng

Answer 2

Nếu bạn chỉ có 100 phần tử thì điều đó không quan trọng. Chỉ cần đặt thuộc tính display của đối tượng kiểu của chúng để hiển thị hoặc ẩn chúng.

Answer 3

Sử dụng id duy nhất của tất cả các hàng và sử dụng jquery để vận dụng nó bằng cách thay đổi giá trị của họ ..

Answer 4

Cách tốt nhất có thể, quấn tất cả những yếu tố trong một div và thiết lập phong cách cho các div bên ngoài (giả sử họ ở bên nhau như bạn đã nói chúng là hàng)

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

Đặt kiểu phù hợp cho div bao bọc của bạn.

Và thông thường tôi không nghĩ chúng ta cần phải lo lắng về sự hoàn hảo về những thứ như vậy vì chúng là những hoạt động rất tầm thường.

Answer 5

Tôi nghĩ rằng tạo ra một lớp CSS với màn hình không và áp dụng lớp đó để TR yếu tố bằng cách làm này bạn sẽ có thể sử dụng bộ chọn jquery để sử dụng sau này. $('TR.hidden') và if(!$('TD').hasClass('hidden'))