Avior
Avior

Reputation: 111

Mixitup library - Do not run sort on non target elements

I am using mixItUp library to sort and filter elements.

In my project i have non target elements in between the target elements which are being sorted as well. i am trying to sort only the target ones!

For example:

mixitup('#mix-wrapper', {
  load: {
    sort: 'order:asc'
  },
  animation: {
    effects: 'fade rotateZ(-180deg)',
    duration: 700
  },
  classNames: {
    block: 'programs',
    elementFilter: 'filter-btn',
    elementSort: 'sort-btn'
  },
  selectors: {
    target: '.mix-target'
  }
});
<pre>
  <div id="mix-wrapper">
    <p class="mix-target graduate" data-order="7" data-year="1"><a href="#">Informatics<span>(G)</span></a></p>
    <p class="mix-target phd" data-order="4" data-year="3"><a href="#">Criminology<span>(P)</span></a></p>
    <p class="mix-target undergraduate" data-order="16" data-year="3"><a href="#">Sociology<span>(U)</span></a></p>
    <p class="mix-target undergraduate" data-order="6" data-year="4"><a href="#">Greek<span>(U)</span></a></p>
    <p class="non target">i am non target element and i want to stay here! </p>
    <p class="mix-target phd" data-order="1" data-year="3"><a href="#">Astrophysics<span>(P)</span></a></p>
    <p class="mix-target undergraduate" data-order="12" data-year="4"><a href="#">Nursing<span>(U)</span></a></p>
    <p class="mix-target undergraduate" data-order="9" data-year="4"><a href="#">Mathematics<span>(U)</span></a></p>
    <p class="mix-target graduate" data-order="11" data-year="3"><a href="#">Nanoscience<span>(G)</span></a></p>
    <p class="non target">i am another non target element and i want to stay here as well! </p>
    <p class="mix-target phd" data-order="13" data-year="3"><a href="#">Pathology<span>(P)</span></a></p>
    <p class="mix-target graduate" data-order="8" data-year="1"><a href="#">Management<span>(G)</span></a></p>
    <p class="mix-target phd" data-order="15" data-year="4"><a href="#">Pubpc Health<span>(P)</span></a></p>
  </div>
</pre>

Is it possible ?

Upvotes: 1

Views: 87

Answers (0)

Related Questions