[jQuery] Gruppierung anhand Inhalt von span Element

C

Crazy-Achmet

Grünschnabel
Hallo liebe Community,

ich habe folgende Liste

HTML: 
<ul id="products">
	<li class="productbit">
		<h3>Product 1</h3>
		<span class="category">Animal</span>
	</li>
	<li class="productbit">
		<h3>Product 2</h3>
		<span class="category">Hardware</span>
	</li>
	<li class="productbit">
		<h3>Product 3</h3>
		<span class="category">Software</span>
	</li>
	<li class="productbit">
		<h3>Product 4</h3>
		<span class="category">Animal</span>
	</li>
	<li class="productbit">
		<h3>Product 5</h3>
		<span class="category">Animal</span>
	</li>
	<li class="productbit">
		<h3>Product 6</h3>
		<span class="category">Tools</span>
	</li>
	<li class="productbit">
		<h3>Product 7</h3>
		<span class="category">Software</span>
	</li>					
</ul>

Ich möchte jetzt, dass mir die Liste per jQuery gruppiert wird, je nachdem welche Kategorie es hat.

Es soll also ein UL mit der ID Animal erstellt werden, ein UL mit Hardware, ein UL mit Software und ein UL mit Tools.

Ich werde vermutlich alle span.category durchgehen müssen und gucken welche Kategorien es überhaupt gibt und anschließend das Elternelement selektieren und in ein UL wrappen, oder? Nur weiß ich leider nicht genau, wie das geht! :(

Hoffe ich habe mich nicht zu unverständlich ausgedrückt, ansonsten bitte einfach nochmal fragen! :)

Vielen Dank im Voraus für eure Hilfe!

Lg,

Flo
 
Hi,

du kannst mit Hilfe der Methode each die Elemente mit der Klasse category durchlaufen. Für jedes Element prüfst du, ob es bereits eine Liste mit der ID der zugehörigen Kategorie gibt. Existiert bisher keine, wird eine Liste erstellt und ins Dokument eingehängt.

Anschliessend wird das aktuelle Element noch geklont und in die zugehörige Liste eingefügt.

Bespiel:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
#Animal{
  color: #c00;
}
#Hardware{
  color: #369;
}
#Tools{
  color: #963;
}
#Software{
  color: #393;
}
 //-->
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function(){
  // Kategorien durchlaufen
  $('.category').each(function(i){
    // Falls zur Kategorie noch keine Liste existiert
    if($('#'+$(this).html()).length == 0){
      // Liste erstellen, mit ID versehen und in Wrapper-DIV einhängen
      $('#wrap_div').append($(document.createElement('ul')).attr({id: $(this).html()}));
    }

    // Aktuelles Produkt in zugehörige Liste einhängen
    $('#'+$(this).html()).append($(this).parent('li').clone());
  });

  // Ausgangsliste löschen
  $('#products').remove();
});
 //-->
</script>
</head>
<body>
<div id="wrap_div"></div>
<ul id="products">
  <li class="productbit">
    <h3>Product 1</h3>
    <span class="category">Animal</span>
  </li>
  <li class="productbit">
    <h3>Product 2</h3>
    <span class="category">Hardware</span>
  </li>
  <li class="productbit">
    <h3>Product 3</h3>
    <span class="category">Software</span>
  </li>
  <li class="productbit">
    <h3>Product 4</h3>
    <span class="category">Animal</span>
  </li>
  <li class="productbit">
    <h3>Product 5</h3>
    <span class="category">Animal</span>
  </li>
  <li class="productbit">
    <h3>Product 6</h3>
    <span class="category">Tools</span>
  </li>
  <li class="productbit">
    <h3>Product 7</h3>
    <span class="category">Software</span>
  </li>
</ul>
</body>
</html>

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück