Kombinieren von Medienabfragen, last-of-type und Klassennamen

Question

Ich arbeite an einer Anwendung mit einem eindeutigen Regelsatz.
Hier ist ein vereinfachtes Regelsatz:

• Die „main-Einheit“ ist immer sichtbar
• Es ist immer nur ein „Haupteinheit“
• Die „Hauptperson“ an seine jede Position in der Liste
• Auf großen Bildschirmen sollte es nicht mehr als 7 sichtbare Entitäten geben (1 Haupt und 6 reguläre)
• Auf mittleren Bildschirmen sollte es nicht mehr als 4 sichtbare Entitäten (1 Haupt und 3 regulären)
• Auf kleinen Bildschirmen sollte es nicht mehr als 2 sichtbare Elemente geben (1 Haupt- und 1 Normal)
• Die letzten Elemente sollten zuerst angezeigt werden. Hier

ist die CSS:

.btn-breadcrumb > li.main-entity { 
    display: block; 
    color: red; 
} 
.btn-breadcrumb > li { 
    display: none; 
} 
/* === For phones =================================== */ 
@media (max-width: 767px) { 
    .btn-breadcrumb > li:nth-last-child(-n+1) { 
    display: block; 
    } 
} 
/* === For tablets ================================== */ 
@media (min-width: 768px) and (max-width: 991px) { 
    .btn-breadcrumb > li:nth-last-child(-n+3) { 
    display: block; 
    } 
} 
/* === For desktops ================================== */ 
@media (min-width: 992px) { 
    .btn-breadcrumb > li:nth-last-child(-n+6) { 
    display: block; 
    } 
} 

und hier einige HTML:

<ul class="btn-breadcrumb"> 
    <li>Entity 1</li> 
    <li>Entity 2</li> 
    <li>Entity 3</li> 
    <li>Entity 4</li> 
    <li>Entity 5</li> 
    <li>Entity 6</li> 
    <li class="main-entity">Entity 7</li> 
    <li>Entity 8</li> 
</ul> 

Wenn die Haupteinheit am Anfang der Liste ist, gibt es kein Problem. See a simple fiddle here. Ändern Sie die Breite, um sie in Aktion zu sehen.

Wenn jedoch die Haupt-Entität eines der letzten Elemente ist, bin ich um 1. See here.

In der ursprünglichen Implementierung war die Haupteinheit immer in Position 1, so dass es einfach zu implementieren war. Jetzt, mit der Anforderung, dass sich die Haupteinheit bewegen kann, bin ich nicht sicher, was der beste Weg ist, um zu bestimmen, ob die Haupteinheit in der sichtbaren Gruppe von Einheiten ist, abhängig von der Bildschirmgröße. Ich weiß, dass das nicht rein mit CSS getan werden kann (ich habe mehrere Diskussionen wie here, erklärt, warum Pseudo-Klassen nicht auf einen Selektor angewendet werden können).

Mit jQuery kann ich Größenänderungsereignisse erkennen und die Bildschirmbreite bestimmen und dann sichtbare Elemente entsprechend einstellen. Dies scheint nur sehr überflüssig zu sein, um meine Medienabfragewerte in meinen Code zu ziehen. Ist das wirklich die einzige Lösung hier?

Answer 1

Sie vermeiden Medienanfragen in das Javascript mit der Zugabe von folgenden:

JavaScript

$('.btn-breadcrumb > li:not(.main-entity)').slice(-1).addClass('phone'); 
$('.btn-breadcrumb > li:not(.main-entity)').slice(-3).addClass('tablet'); 
$('.btn-breadcrumb > li:not(.main-entity)').slice(-6).addClass('desktop'); 

CSS

/* === For phones =================================== */ 
@media (max-width: 767px) { 
    .btn-breadcrumb > li.phone { 
    display: block; 
    } 
} 
/* === For tablets ================================== */ 
@media (min-width: 768px) and (max-width: 991px) { 
    .btn-breadcrumb > li.tablet { 
    display: block; 
    } 
} 
/* === For desktops ================================== */ 
@media (min-width: 992px) { 
    .btn-breadcrumb > li.desktop { 
    display: block; 
    } 
} 

HTML wird eine Ausgabe wie folgt aus:

<ul class="btn-breadcrumb"> 
<li>Entity 1</li> 
<li class="desktop">Entity 2</li> 
<li class="desktop">Entity 3</li> 
<li class="desktop">Entity 4</li> 
<li class="tablet desktop">Entity 5</li> 
<li class="tablet desktop">Entity 6</li> 
<li class="main-entity">Entity 7</li> 
<li class="phone tablet desktop">Entity 8</li> 
</ul> 

Spiel umher mit dem Verschieben der .main-entity Klasse zu einem anderen Listenelement und Sie werden sehen, dass es Ihren Regeln gehorcht.

https://jsfiddle.net/rr5Lcjok/60/