Isotope: Select and display .xx class at the top

Question

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.

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();
      }
    }

Answer 1

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

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

I am assuming that for date only you used $elem.find('.date').text()

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

Try

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

---

Update for comments

    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();
        },