使用 JQuery 删除液体创建列表中的重复项
长期用户,第一次发帖。
基本上,我在不同的位置有一系列的售货亭,并且使用“液体”,我有一个凭证系统,可以自动将与某个位置关联的所有凭证放入列表中。我还使用此代码在每 10 个条目后启动一个新列表。然后使用 jQuery,我添加了滚动条以在列表之间滑动。其代码非常简单:
{% 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 %}
但是,列表中的某些优惠券出现多次。这是因为优惠券分为 3 类,有些可以交叉。由于存在多个位置,我无法向凭证添加任何内容(例如钥匙或标签)以阻止其显示,因为它可能想在另一个位置显示。另外,每个系统都必须手动调整,而该系统的重点是尽可能自动化。因此,我使用了一些我非常满意的jquery。
<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>
由此您可以看出,我使用了凭证名称作为 div id,然后 jquery 删除了具有相同 id 的任何 div。然而,它在原来的位置留下了一个空格,因此有些页面上有 8 个而不是 10 个。因此我们得出了我的问题。如何删除液体列表中的重复项而不留下任何空格?
我尝试将“.remove()”更改为“.hide()”但没有用。我将其更改为
.addClass( "duplicate" )
希望随后在液体中添加一行以表示类似“
{% if div.class != "duplicate" %}
因此不使用带有“duplicate”div 的内容。那就太好了。但我找不到执行此操作的代码,甚至不知道这是否可能。我试图在这里涵盖所有角度并尽可能地解释一切。我是如此接近,但也许不同的观点会起作用,或者有更简单的方法吗?我是否走在正确的轨道上?任何想法将不胜感激。
编辑:这是一张图片来尝试进一步解释这一点。 http://img683.imageshack.us/img683/6295/voucherpagehelp.jpg 另外,我还添加了一些从其他地方提取的代码,这将有助于解释滚动系统。抱歉,之前没说清楚。
提前致谢。
Long time user, first time poster.
Basically, I have a series of kiosks in different locations and using 'liquid' I have a voucher system that automatically puts all the vouchers associated with a location in a list. I'm also using this code to start a new list after every 10 entries. Then with jQuery I've added scrollers to slide between the 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 in the list appear more than once. This is because the vouchers are split into 3 categories and some can cross over. Because of there being several locations I can't add anything to the voucher such as a key or tag to stop it showing as it may want to show in another location. Plus, each one would then have to be adjusted manually and the point of this system is to be as automatic as possible. Therefore, I used some jquery which I was pretty pleased with.
<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 tell that I used the voucher name for the div id and then the jquery removes any divs that have the same id. However, it leaves a space where it was and therefore some pages have 8 on instead of 10. Thus we arrive at my question. How do I removes duplicates in the liquid list without leaving any spaces?
I have tried to change the ".remove()" to ".hide()" but no use. I changed it to
.addClass( "duplicate" )
In hope of then adding a line in the liquid to say something like
{% if div.class != "duplicate" %}
Therefore not using those with a div of "duplicate". Which would be nice. But I can't find the code to do it or even know if it's possible. I've tried to cover all angles here and explain everything as best as I can. I'm so so close but maybe a different perspective would work or is there an easier method? Am I even on the right track? Any ideas would be very much appreciated.
Edit: Here's an image to try explain this further. http://img683.imageshack.us/img683/6295/voucherpagehelp.jpg
Also, I've added a bit more code which was being pulled from somewhere else which will help explain the scrolling system. Sorry this wasn't clear before.
Thanks in advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
以下是我对 Liquid 中删除重复项的看法:
Here’s my take on removing duplicates in Liquid:
如果您要使用 jQuery 构建此列表,我将使用 Liquid JSON 过滤器将整个凭证对象捕获到 JavaScript 对象中。然而,我首选的方法是使用 Liquid,以便允许没有 JavaScript 的浏览器正确查看内容:
If you're going to use jQuery to build this list, I would capture the entire vouchers object into a JavaScript object using the liquid JSON filter. However my preferred way to do this would be with liquid, so as to allow browsers without JavaScript to see the content properly: