Isótopo:Selecione e exiba a classe .xx na parte superior
-
13-12-2019 - |
Pergunta
Estou usando os métodos de classificação do Isotope (http://isotope.metafizzy.co/docs/sorting.html) e preciso exibir elementos com um nome de classe CSS específico atribuído a eles na parte superior quando um link é clicado.Os elementos restantes devem permanecer visíveis abaixo dos elementos classificados, portanto não posso usar a filtragem isotópica.
Não estou tão confortável com JS/jQuery, então nem tenho certeza se esse código está definido corretamente, mas atualmente meus elementos estão classificados por data, o que é ótimo, mas está fazendo isso para todos os elementos.Gostaria que meu código encontrasse todos os elementos com o nome de classe 'blogs' e depois organizasse por data.Este é o meu código até agora:
getSortData : {
blogs : function( $elem ) {
return $elem.attr('.blogs'), $elem.find('.date').text();
}
}
Solução
Isotope faz uma classificação normal com base no valor retornado da função que você fornece.
Então você precisa retornar algo que coloque o .blog
elementos no topo..
Estou assumindo que apenas para data você usou $elem.find('.date').text()
Então, para alterar isso, você pode simplesmente adicionar um espaço no início para os elementos que são .blog
Tentar
getSortData : {
blogs : function( $elem ) {
var isBlog = $elem.hasClass('blogs');
return (isBlog?' ':'') + $elem.find('.date').text();
}
}
Atualização para comentários
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();
},