同位素：选择并在顶部显示.xx类 [英] Isotope: Select and display .xx class at the top

问题描述

我正在使用Isotope中的排序方法（http://isotope.metafizzy.co/docs/sorting.html），并且需要在链接显示时在顶部显示分配了特定CSS类名的元素点击。其余元素必须在排序元素下方保持可见，因此我无法使用同位素过滤。

I'm using the sorting methods within Isotope (http://isotope.metafizzy.co/docs/sorting.html) and need to display elements with a specific CSS class name assigned to them at the top when a link is clicked. The remaining elements must remain visible beneath the sorted elements so I cannot use Isotope filtering.

我对JS / jQuery不太满意所以我甚至不确定如果这个代码甚至是正确设置的，但是目前我的元素按日期排序很好，但是它对所有元素都这样做。我希望我的代码能够找到类名为blogs的所有元素，然后按日期排列。这是我到目前为止的代码：

I'm not so comfortable with JS/jQuery so I'm not even to sure if this code is even set out correctly but currently my elements are sorting by date which is great, however its doing this for all elements. I would like my code to find all elements with the class name of 'blogs' then arrange by date. This is my code so far:

    getSortData : {
      blogs : function( $elem ) {
        return $elem.attr('.blogs'), $elem.find('.date').text();
      }
    }

推荐答案

同位素根据您提供的函数的返回值进行正常排序。

Isotope does a normal sort based on the returned value of the function you provide.

因此您需要返回放置 .blog 顶部的元素..

So you need to return something that puts the .blog elements at the top ..

我假设只在日期使用 $ elem.find（'。date'） .text（）

所以要改变它，你可以在开头为元素添加一个空格。博客

So to alter this you can just add a space at the beginning for elements that are .blog

尝试

getSortData : {
  blogs : function( $elem ) {
    var isBlog = $elem.hasClass('blogs');
    return (isBlog?' ':'') + $elem.find('.date').text();
  }
}

---

评论更新

    sortBy: 'initial',
    sortAscending : false,
    itemSelector: '.module',
    getSortData: {
        initial: function($elem) {
            return $elem.find('.date').text();
        },
        blogs: function($elem) {
            var isBlog = $elem.hasClass('blogs');
            return (isBlog ? '9' : '') + $elem.find('.date').text();
        },

这篇关于同位素：选择并在顶部显示.xx类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！