JQuery append element removes all html dom element

Question

I have a filter system setup and I'm struggling with jquery .append.

When the user interacts with the filter system, the visible results are removed from the dom and then distributed evenly in <div class="col-1"> ... <div class="col-2">... <div class="col-3">...

It's done this way because the page outputs staff in a vertical manner, but the filtering must reorder horizontally. You'll see what I mean when you use the first filter.

Please view this page: demo page

1. Click on Event Sponsor
2. Then click on East

The function that I'm talking about is reflowVisibleResults() Basically visible results are copied to an array and then removed from the document only to be then reflowed left to right in col-1,col-2,col-3

The whole page is replaced with just a phone number. If you go to line 917 and switch the above line over it works as expected. I just can't figure out how to actually output html from an array of jquery objects.

Answer 1

it seems to me that you are over complicating the problem. i created a filter system similar to this but i used jQuery .filter() or .not() methods to achieve the results.

It only took me two lines of jquery to create the filtering system.

Answer 2

Agree with Parker, you code seems way overcomplicated for what it needs to be. Here is quick sample of how I would do it.

I am sure it can be optimized and polished quiet a bit, but that should be enough to get you on the right path.