Jquery "nth-child"问题

Question

我有一个项目 list ，总共十个，但是还会有更多......

我有一个“排序”功能，允许用户按“价格”或“字母顺序”查看商品。

这工作正常，我遇到的问题是我用来获取列表中第五个 child 的选择器行出了问题。

这是代码行:

$("#list-category-results li:nth-child(5n)").css("margin-right", "0");

另外，这是一个 jsFiddle我目前的进展。

当您点击“价格”或“字母顺序”时，“margin-right: 0”的位置不会停留在第五个元素上，我不知道为什么？

Answer 1

您需要重新执行此行:

$("#list-category-results li:nth-child(5n)").css("margin-right", "0");

每次排序时。

In 不会仅仅因为您对子项重新排序而自动发生，除非它在您的 CSS 规则中。使用 jQuery 直接添加 CSS 样式会将这些样式添加到特定元素，并且这些元素在 DOM 树中移动时将保留这些样式。

因此，您还需要删除已更改位置的项目的 CSS 样式，例如:

$("#list-category-results li")
    .css('margin-right', '')      // clear all <li> margins
    .filter(':nth-child(5n)')
    .css('margin-right', '0px');  // set every 5th <li> margin