[jQuery] Liste gruppieren

[Crazy-Achmet]

Hey ihr lieben,

ich habe mal wieder eine kleine Frage zu meinem Projekt!

Ich habe folgende, sortierte Liste:

<ul id="liste">
	<li class="group1">Beispielinhalt</li>
	<li class="group1">Beispielinhalt</li>
	<li class="group1">Beispielinhalt</li>
	<li class="group2">Beispielinhalt</li>
	<li class="group2">Beispielinhalt</li>
	<li class="group2">Beispielinhalt</li>
	<li class="group3">Beispielinhalt</li>
	<li class="group3">Beispielinhalt</li>
	<li class="group3">Beispielinhalt</li>
</ul>

So, ich möchte jetzt gerne eine Funktion haben, die jedes LI Element durchgeht und die Klassen überprüft. Wenn eine Klasse zum ersten Mal auftritt, dann soll dem ganzen ein <UL> mit der ID (oder Klasse) vorangestellt werden. Nach der letzten Klasse, soll dann das UL geschlossen werden.

Da es ein wenig Konfus ist, hier mal ein Beispiel, was aus dem oberen Beispiel werden soll.

<ul id="group1">
	<li class="group1">Beispielinhalt</li>
	<li class="group1">Beispielinhalt</li>
	<li class="group1">Beispielinhalt</li>
</ul>
<ul id="group2">
	<li class="group2">Beispielinhalt</li>
	<li class="group2">Beispielinhalt</li>
	<li class="group2">Beispielinhalt</li>
</ul>
<ul id="group3">
	<li class="group3">Beispielinhalt</li>
	<li class="group3">Beispielinhalt</li>
	<li class="group3">Beispielinhalt</li>
</ul>

Vielleicht hat ja irgendwer schonmal was ähnliches erstellt oder hat ne Idee, wie ich das lösen kann! Danke schonmal im Voraus.

Liebe Grüße

Flo

 

[Sven Mintel]

Moin Flo,

dies wäre eine Möglichkeit:

$(document).ready(function(){
  
  while($('#liste li[class]').length)
  {
    var class=$('#liste li[class]')[0].className;
    $($('#liste li[class="'+class+'"]')
      .wrapAll(document.createElement('ul'))[0])
        .parent().attr('id',class).insertBefore('#liste');
  }
  $('#liste').remove();
});

 

[Crazy-Achmet]

Hey Sven,

auch wenn es ein bisschen verspätet kommt, aber 1.000 Dank nochmal. Das funktioniert genauso, wie ich mir das vorgestellt habe.

Ich wollte damit jetzt mal selber weiterbasteln, bekomme aber immernur Fehler.

Ich wollte das ganze so erweitern, damit ich es auf die Liste anwenden kann, die ich hier schonmal gepostet habe.

Dort habe ich noch in jedes li.productbit die Zeile <span class="category">Kategorie XX</span> hinzugefügt

Die Gruppierung soll jetzt also nicht mehr nach den einzelnen LIs gemacht werden, sondern dynamisch, z.B. sollen alle LIs zusammen gefasst werden, welche die Kategorie 1 erhalten (und dann auch alle mit Kategorie 2, ...).

Wäre wirklich super, wenn jemand (du?) mir nochmal helfen könntest!

Liebe Grüße

Flo