In einer foreach-Schleife jedes x.te Element auswählen

Hi,

ich würde gerne ein Isotope-Template anpassen (finde aber, es passt besser in diesen Bereich als in Isotope, ist ja eine generelle Frage):

PHP-Code:

---

<?php foreach( $this->info as $type => $data ): ?>
<div class="info_container <?php echo $type . $data['class']; ?>">
    <h3><?php echo $data['headline']; ?></h3>
    <div class="info"><?php echo $data['info']; ?></div>
</div>
<?php endforeach; ?>

---

Damit wird dieses div 4x ausgespuckt, mir ist jetzt spontan kein Fall bekannt, an dem es mehr oder weniger wären. Ich würde das gerne so verbinden, dass die ersten beiden divs ein weiteres Div um sich hätten, z.B. mit der Klasse "left" und die anderen beiden eins mit der Klasse "right". Geht das überhaupt?

Rein mit CSS lässt sich das echt schwer lösen, zumindest fällt mir spontan nix ein, nth-child fällt aus. Ich würde gerne 2 untereinander listen und dieses div dann floaten lasen, damit die anderen beiden daneben wiederum untereinander gelistet werden.

Erstell einfach eine Zählvariable $count=0 und nutze eine If-Abfrage für dein extra-div.
Nicht getestet, fehleranfällig und unschön, aber so könnte es in etwa funktionieren.

HTML-Code:

---

<?php $count=0; ?>
<?php foreach( $this->info as $type => $data ): ?>
if [$count<2){
<div class="left">
<div class="info_container <?php echo $type . $data['class']; ?>">
    <h3><?php echo $data['headline']; ?></h3>
    <div class="info"><?php echo $data['info']; ?></div>
</div>
</div>;}
else{
<div class="right">
<div class="info_container <?php echo $type . $data['class']; ?>">
    <h3><?php echo $data['headline']; ?></h3>
    <div class="info"><?php echo $data['info']; ?></div>
</div>
</div>;}
$count++;
<?php endforeach; ?>

---

Unschön nicht getestet, könnte funktionieren. Schau ich aber jetzt nicht an.

Schön: Einsatz eines Grid, das nested-Elemente unterstützt. Templates zu Darstellungszwecken verbiegen halte ich für schlechten Stil.

Zitat:

---

Zitat von lucina

Templates zu Darstellungszwecken verbiegen halte ich für schlechten Stil.

---

Stimme ich zu.

Um deine Frage aber trotzdem zu beantworten gibt es das hier:

Zitat:

---

Rein mit CSS lässt sich das echt schwer lösen, zumindest fällt mir spontan nix ein, nth-child fällt aus

---

Jedes nte Element lässt sich mit dem Modulu-Operator darstellen.

Das ist so ähnlich wie das Rest-Rechnen aus der Grundschule.

PHP-Code:

---


if($count % 2 === 0)
{
   // Bei jedem zweiten Element
} 


---

Beispiele und Beschreibung: http://www.php.net/manual/de/languag...etic.php#70424

Zitat:

---

Zitat von wulf

Nicht getestet, fehleranfällig und unschön, aber so könnte es in etwa funktionieren.

---

Das funktioniert sogar ganz sicher nicht. :-)

Ich bin jetzt leider doch auf einen Fall gestoßen, bei dem die linke Spalte nur 1 Element haben soll, d.h. wie ich mir das vorgestellt hatte ging es gar nicht :mad: Daher musste ich jetzt lange am CSS wurschteln, bis es richtig hingehauen hat. Trotzdem danke euch allen!

Alternativ wäre es recht simpel mit jQuery gegangen ;-)

Gesendet von meinem GT-I9300 mit Tapatalk