CODEWITHSUNDEEP
jquerycsscss-selectorsmixitup
Quinox
Quinox

Reputation: 583

Refresh nth-of-type order after filtering

I sort some <li> with MixItUp (https://mixitup.kunkalabs.com/docs) but CSS fails to apply the correct nth-of-type when the order changes (button 2 pushed). It stills use the li.isActive:nth-of-type(3n+2) instead of li.isActive:nth-of-type(3n+1) I tried to add .isActive on filtered elements but it's ineffective. Is there any way to sort or refresh visible elements with nth-child or nth-of-type ? Thanks.

HTML

<ul id="mosaic">
    <li class="col-md-4 mix freelance" data-myorder="1">
        <div class="project">
            1
            <p class="card-text">
                xyz
            </p>
        </div>                        
    </li>

SCSS

#mosaic li.isActive:nth-of-type(1) .project {
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -ms-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}...

Javascript

$('#mosaic').mixItUp({
    callbacks: {
        onMixEnd: function(state){
            console.log(state.$show);
            state.$targets.removeClass('isActive');
            state.$show.addClass('isActive');
        }
    }
});

Full example on Jsfiddle: https://jsfiddle.net/0d8LgsxL/

Upvotes: 0

Views: 829

Answers (0)

Related Questions