<li>
我使用 MixItUp ( https://mixitup.kunkalalabs.com/docs )对一些进行排序,但是当订单更改时 CSS 无法应用正确的 nth-of-type (按下按钮 2)。它仍然使用li.isActive:nth-of-type(3n+2)
而不是li.isActive:nth-of-type(3n+1)
我尝试添加.isActive
过滤元素,但它无效。有没有办法用 or 对可见元素进行排序或 nth-child
刷新 nth-of-type
?谢谢。
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');
}
}
});
关于 Jsfiddle 的完整示例:https ://jsfiddle.net/0d8LgsxL/