1

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

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

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

这是代码行：

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

另外，这是我当前进度的jsFiddle。

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

4

2 回答 2

4

您需要重新执行此行：

$("#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
于 2012-09-04T21:29:32.770 回答
1

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

$(document).ready(function(){
    // Apply margin-right: 0 on DOM Ready //
    $("#list-category-results li:nth-child(5n)").css("margin-right", "0");    

    // Update margin-right on Sorting of Elements //
    $('.btnSort').bind('click', function(){
        $("#list-category-results li").css('margin-right', '');
        $("#list-category-results li:nth-child(5n)").css("margin-right", "0");
    });
});

在这里更新了 JSFIddle

我希望这有帮助！

于 2012-09-04T21:31:18.747 回答