Question

我有一个项目清单，总共十个，但会有更多......

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

这很好用，我遇到的问题是我用来获取列表中的第5个孩子的选择器行正在喋喋不休。

以下是代码行：

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

此外，这是我当前进展的jsFiddle。

当您点击“价格”或“按字母顺序排列”时，“margin-right：0”的位置不会停留在第5个元素上，我不明白为什么？

Answer 1

您需要重新执行此行：

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

每次排序。

只是因为你已经重新订购了孩子，所以不会自动发生，除非它符合你的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

Answer 2

您可以绑定到排序按钮的click事件，并删除所有margin-right的{{1}}值并重新应用到第五项，如下所示：

li

Updated JSFIddle Here

我希望这有帮助！

Jquery“n-child”问题

2 个答案: