Blog filter !!! Uprav pro načítání nových postů

A) tyhle dva filtry přidávají třídy postům a wrapperu (podle spanu v tlačítku a prvních 3 písmen v popisku postu

B) Pak je třeba nastavit přes css jaké permutace se mají kdy ukazovat, například:

.news-item .text .description p span {display: none;}

.type-post .text > h6:first-child {display: none;}

.SEX .news-item,
.DRG .news-item,
.RNR .news-item {display: none;}

.SEX .SEX.news-item,
.DRG .DRG.news-item,
.RNR .RNR.news-item {display: block;}

C) a přidat button na smazani všech filtrů

<script>
$('.news-item .text .description p').each(function(){
var first_3 = $( this ).text().substring(0, 3);
$( this ).parent().parent().parent().addClass( first_3 );

$( this ).html((i, h) => `<span>${h.slice(0,3)}</span>${h.slice(3)}`);
})
$('.blog_filter').click(function() {
var first_3_filter = $( this ).children().text().substring(0, 3);
$('#newsWrapper').removeClass();
$('#newsWrapper').addClass( first_3_filter );
});
$('.blog_filter.close').click(function() {
$('#newsWrapper').removeClass();
});
</script>

Optional beauty CSS

<ul id="blog_filters">
<li class="blog_filter"><span>SEX</span>SEX</li>
<li class="blog_filter"><span>DRG</span>DROGY</li>
<li class="blog_filter"><span>RNR</span>ROCK 'N ROLL</li>
<li class="blog_filter close">Zrušit filtry</li>
</ul>

#blog_filters {
padding: 0;
display: flex;
justify-content: center;
list-style-type: none;
}
#blog_filters li {
padding: 12px 24px;
border: solid 1px;
margin: 5px;
cursor : pointer;
}
#blog_filters li:hover {
background: #000;
color: #fff;
}
#blog_filters li:last-child {
color: red;
border: solid 1px #fff;
}
#blog_filters li:last-child:hover {
border-color: #fff;
background: #fff;color:red;text-decoration: underline;
}
#blog_filters li span {display: none;}