Removing duplicates in a liquid generated list using jQuery

Question

Long term user, first poster.

Basically, I have a series of stalls in different places and using "fluid". I have a voucher system that automatically places all the vouchers associated with the location on the list. I also use this code to start a new list after every 10 entries. Then using jQuery I added scrollers to move between lists. The code for this is pretty straight forward:

{% for voucher in vouchers %} {% capture modulus %}{{ forloop.index0 | mod:10 }}{% endcapture %} {% if forloop.index0 != 0 %} {% if modulus == "0" %} </ul></li><li><ul class="voucherlist"> {% endif %} {% endif %} <div id="{{ voucher.meta }}" class="voucher_list"> <li><a href="{{ 'voucher' | url_for_page : voucher.id }}">{{ voucher.meta }}</a></li> </div> {% endfor %} 

However, some vouchers appear on the list more than once. This is because the vouchers are divided into 3 categories, and some of them may overlap. Due to the presence of several places, I can not add anything to the voucher, for example, to a key or tag to stop it from showing, since it can show elsewhere. In addition, each of them should then be adjusted manually, and the point of this system should be as automatic as possible. So I used some jquery which I really liked.

 <script type="text/javascript"> $(document).ready(function () { $('[id]').each(function () { var ids = $('[id=' + this.id + ']'); if (ids.length > 1 && ids[0] == this) { $(ids[1]).remove() } }); }); </script> 

From this you can say that I used the voucher name for the id div, and then jquery removes any divs that have the same id. However, it leaves the space where it was, and therefore on some pages there are 8 instead of 10. Thus, we come to my question. How to remove duplicates in a fluid list without any spaces?

I tried changing ".remove ()" to ".hide ()" but not using it. I changed it to

.addClass( "duplicate" )

Hoping then add a line to the liquid to say something like

 {% if div.class != "duplicate" %} 

Therefore, do not use those that have a duplicate div. Which would be nice. But I can not find the code for this or even know if this is possible. I tried to cover all corners and explain everything as best as possible. I'm so close, but maybe another job will work or is there an easier way? Am I even on the right track? Any ideas would be greatly appreciated.

Edit: Here is an image to try to explain it further. http://img683.imageshack.us/img683/6295/voucherpagehelp.jpg In addition, I added a bit more code that is extracted from another place, which will help explain the scroll system. Sorry it was unclear before.

Thanks in advance.

Answer 1

Here I take to remove duplicates in Liquid:

 {% assign array = 'c|c|b|b|a|a' | split: '|' %} {% assign result = array[1] %} {% for item in array %} {% unless result contains item %} {% capture result %}{{ result }}|{{ item }}{% endcapture %} {% endunless %} {% endfor %} {{ result | split: '|' | sort | join: ', ' }} 

Answer 2

If you intend to use jQuery to create this list, I would grab the entire voucher object into a JavaScript object using the JSON liquid filter. However, my preferred way to do this would be with liquid so that browsers without JavaScript can see the content correctly:

 {% assign UsedIDs = '' %} {% assign Counter = 0 %} {% for voucher in vouchers %} {% capture IDToCheck %},{{voucherID}},{% endcapture %} {% unless UsedIDs contains IDToCheck %} {% capture modulus %}{{ Counter | mod:10 }}{% endcapture %} {% if Counter != 0 %} {% if modulus == "0" %} </ul></li><li><ul class="voucherlist"> {% endif %} {% endif %} <div id="{{ voucher.meta }}" class="voucher_list"> <li><a href="{{ 'voucher' | url_for_page : voucher.id }}">{{ voucher.meta }}</a></li> </div> {% capture UsedIDs %}{{ UsedIDs }}{{ IDToCheck }}{% endcapture %} {% capture Counter %}{{ Counter | plus: 1 }}{% endcapture %} {% endunless %} {% endfor %}