Question

我在尝试弄清楚如何进行特定类型的排序方面遇到了麻烦，通常我会按类别ID进行排序，但这次我试图实现不同的目标。

好的，这里是示例代码：

<div class="points-wrapper">

<span class="rewards-points">
        <span data-bind="text: $data.Points">1000</span> Points
</span>

<span class="rewards-points">
        <span data-bind="text: $data.Points">5000</span> Points
</span>

<span class="rewards-points">
        <span data-bind="text: $data.Points">5000</span> Points
</span>

</div>

排序下面的按钮。

<div id="sorts" class="button-group">
  <button class="button is-checked" data-sort-value="original-order">original order</button>
  <button class="button" data-sort-value="points">500</button>
  <button class="button" data-sort-value="points">1000</button>
  <button class="button" data-sort-value="points">2000</button>
  <button class="button" data-sort-value="points">3000</button>
  <button class="button" data-sort-value="points">5000</button>
</div>

这是我实际工作的一个较小的例子，真正的一个有大约30个不同的项目都有不同的点数。

我试图弄清楚如何根据跨度内的点数进行排序。选项将是＆＃34; 0 - 1000＆＃34;，＆＃34; 1000 - 5000＆＃34;，＆＃34; 5000 - ＆＃34; 10000＆＃34;等

如何使用jQuery和Isotope.js对其进行排序？

Answer 1

* SORTING *

所以我假设rewards-points类是你的同位素项，因此：

var container = $('#container').isotope({
itemSelector: '.rewards-points',  
  layoutMode: 'masonry',
    getSortData: {
        points: function(item){
            return parseFloat($(item).find(".number").text());
        }
    }
});

container.isotope({ sortBy: 'points' });

getSortData函数返回Isotope的值以进行排序，然后将sortBy设置为我们在getSortData函数中设置的名称。

详细信息：http://isotope.metafizzy.co/sorting.html

*使用过滤分类*

您需要使用过滤功能，如下所示：

$(".button").click(function(e) {
    if($(this).text() == "All"){
        container.isotope({ filter: function() { return true; } });
    }
    else
    {
        var btnVal = parseFloat($(this).text());
        container.isotope({ filter: function() {
            var itemVal = parseFloat($(this).find(".number").text());
            return btnVal == itemVal;
        }});
    }

});

请参阅：http://isotope.metafizzy.co/filtering.html

我认为应该对它进行排序......但我会说如果你可以改变你的标记，使用data属性来保存值，使用类来保存选择器，它会使同位素工作更多容易！

在此更新小提琴：http://jsfiddle.net/Y59S2/3/

同样，整理HTML会使其变得更加容易，因此需要考虑。

jQuery＆amp;同位素按元素中的数字排序

1 个答案: