[FRAGE] Dynamisch erzeugte verschiedene Divs in richtiger Reihenfolge gruppieren

[lmente]

Hallo Community


Ich habe von Typo3 dynamisch erzeugte Divs gruppiert indem ich einen speziellen Text, den sie gemeinsam haben, in ihnen suche und sie dann wrappe. Das funktioniert auch gut.


Hier mal mein vereinfachter JQuery-Code dazu:

  function gruppieren() {

    var wrapper =  $("<div />").attr("class", "wrapper");
  
    var diveins = $(".eins:contains('  spezieller Text  ')");
  
    wrapper.append (diveins) ;
    
  }

Dabei kommt dann sowas heraus

<div class="wrapper">
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
</div>

Nun habe ich aber folgende Situation, dass nach manchen Divs (div.eins) noch ein zweites erscheinen soll... (div.zwei)

Also dass es folgendermaßen aussieht

<div class="eins">spezieller Text</div>
<div class="eins">spezieller Text</div>
<div class="zwei"></div>
<div class="eins">spezieller Text</div>
<div class="eins">spezieller Text</div>
<div class="eins">spezieller Text</div>
<div class="zwei"></div>
<div class="eins">spezieller Text</div>

Wenn ich das versuche zu wrappen ordnen sich die zweier immer unten an..
sie sollen aber bei ihrem dazugehörigen Einser bleiben.

So soll es aussehen

<div class="wrapper">
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="zwei"></div>
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="eins">spezieller Text</div>
   <div class="zwei"></div>
   <div class="eins">spezieller Text</div>
</div>

Und so sieht es leider aus:

<div class="wrapper">
    <div class="eins">spezieller Text</div>
    <div class="eins">spezieller Text</div>
    <div class="eins">spezieller Text</div>
    <div class="eins">spezieller Text</div>
    <div class="eins">spezieller Text</div>
    <div class="eins">spezieller Text</div>
    <div class="zwei"></div>
    <div class="zwei"></div>
</div>

Mit diesem Code:

  function gruppieren() {

    var wrapper =  $("<div />").attr("class", "wrapper");
  
      var diveins = $(".eins:contains('  spezieller Text  ')");
    var divzwei = $(diveins).next('.zwei');
    
     
    wrapper.append(diveins, divzwei);
    

  }

Wie schaffe ich es dass die Zweier unter ihren Einsern bleiben?
Hoffe die Frage ist nicht zu verwirrend. (Sorry bin noch Anfänger)

Danke für jeden Tip
lmente

 

[tsseh]

Wie schaffe ich es dass die Zweier unter ihren Einsern bleiben?

indem du alles in ein jquery-objekt packst
var diveinsundzwei = $(".eins:contains(' spezieller Text '), .eins:contains(' spezieller Text ') + .zwei");

 

[lmente]

Hallo tsseh!

Lieben Dank für deine Antwort!
Ich hatte in der Zwischenzeit noch eine andere Lösung gefunden.
Indem ich die Divs "eins" und "zwei" wrappe.
Und diese Wrapps dann gruppiere.


Aber deine Lösung scheint mir einfacher zu sein.
Ich probiere sie aus sobald ich wieder mehr Zeit habe.

Danke für die Hilfe!!
Beste Grüße
lmente