Purpose
I am working with a DOM that contains around 70 elements (divs with content). I have the need to move and toggle the display of these divs frequently and rapidly. Speed is crucial in this process. The trigger for moving and toggling these divs is a search query, similar to Google Instant, but all the DOM elements are loaded initially without any server calls.
Approach
The approach I have taken involves passing a JavaScript array of objects along with the DOM. This array mirrors the structure of the DOM elements including their attributes like position and content. When a user starts typing, I iterate through this array multiple times to determine the actions needed for each div/object. To optimize performance, I minimize direct interaction with the DOM as much as possible since manipulating the DOM is slower compared to other operations like looping and attribute manipulation. Finally, after making all the necessary calculations, I perform the required DOM actions using jQuery for cross-browser compatibility.
Challenge
Currently, my code and data structure feel somewhat cumbersome. The multidimensional array containing various attributes and flags makes it complex. Debugging is manageable, but the overall structure doesn't seem elegant.
Inquiry
Is there a design pattern or solution that could streamline this process? I believe implementing a smart relationship between the array and the DOM might eliminate the need for explicit flag setting and DOM actions. However, I'm unsure about how to establish such a connection effectively and whether it would complicate the system further.
Are there any overlooked data structure or algorithmic principles that could simplify this problem-solving process?
Thank you!
Update As requested, here is a snippet of my code which spans approximately 700 lines. Please note that these functions are enclosed within a closure scope and do not pollute the global namespace.
...
(JavaScript code continues)
...