[jQuery] Sortieren nach vordefinierten Werten

[Crazy-Achmet]

Hey,

ich hab da mal eine Frage!

Ich habe eine Liste (keine Tabelle), wo ein Element einem Produkt entspricht. In diesem Element sind Daten wie Name, Preis, Bewertung, etc. enthalten.

Jetzt habe ich oben in der Navigation ein DropDown Feld, wo der User auswählen kann, nach welchem Feld die Liste sortiert werden soll (also z.B. Preis oder Bewertung).

Könnte mir jemand erklären (oder ein Beispiel nennen, auf welcher Seite es ähnlich gelöst wurde), wie ich das ganze mit jQuery lösen kann? Vermutlich muss ich jedem LI Element den Preis und die Bewertung als Klasse mitliefern, um dann anschließend danach zu sortieren, oder?

Liebe Grüße und danke für eure Hilfe.

Flo

 

[Sven Mintel]

Moin Flo,

hast du mal ein Beispiel parat, aus dem der Aufbau der Liste hervorgeht(speziell die Position der Daten im <li>)

 

[Crazy-Achmet]

Zur Zeit ist das ganze ja nur als Test, da hab ich es so aufgebaut:

<ul id="products">
	<li class="productbit">
		<h1>Artikel 1</h1>
		<img src="product1.jpg">
		<span class="price">5,99,-</span>
		<span class="rating">8.8</span>
	</li>

	<li class="productbit">
		<h1>Artikel 2</h1>
		<img src="product2.jpg">
		<span class="price">55,99,-</span>
		<span class="rating">2.8</span>
	</li>
	
	<li class="productbit">
		<h1>Artikel 3</h1>
		<img src="product3.jpg">
		<span class="price">4,99,-</span>
		<span class="rating">7.8</span>
	</li>
	
	<li class="productbit">
		<h1>Artikel 4</h1>
		<img src="product4.jpg">
		<span class="price">5,45,-</span>
		<span class="rating">9.8</span>
	</li>
	
	<li class="productbit">
		<h1>Artikel 5</h1>
		<img src="product5.jpg">
		<span class="price">9,99,-</span>
		<span class="rating">7.8</span>
	</li>
	
	<li class="productbit">
		<h1>Artikel 6</h1>
		<img src="product6.jpg">
		<span class="price">19,98,-</span>
		<span class="rating">5.55</span>
	</li>

</ul>

Meine Idee war es jetzt, den Preis und die Bewertung in der Form class="productbit price_1998 rating_555" mit in das LI zu packen, auch wenn Daten dort natürlich nichts verloren haben.

Lg,

Flo

 

[Sven Mintel]

Du kannst die Daten dort lassen, wo sie sind...für jQuery sind sie gut zu finden

Hier mal ne kleine Funktion dafür:

function Sorter(listSelector,itemSelector,orderSelector,order)
{
  var items=$(listSelector).clone(true).find(itemSelector);
  
  items.sort(($.grep(items,function(e){return isNaN($(e).find(orderSelector).eq(0).text());}).length)
              ?(function(a,b)
              {
                var c=(order=='desc')?[b,a]:[a,b];
                return ($(c[0]).find(orderSelector).eq(0).text()>$(c[1]).find(orderSelector).eq(0).text())?1:-1;
              })
              :(function(a,b)
              {
                var c=(order=='desc')?[b,a]:[a,b];
                return ($(c[0]).find(orderSelector).eq(0).text()-$(c[1]).find(orderSelector).eq(0).text());
              })
            );
   
   for(var i=0;i<items.length;++i)
   {
     $(listSelector+' '+itemSelector).eq(i).replaceWith(items[i]);
   }
}

Erwartete Argumente:

1. Selektor für die Liste
2. Selektor für die zu berücksichtigenden <li>
3. Selektor für das Element, nach dessen Inhalt sortiert werden soll
4. (optional)'desc' für absteigende Sortierung, standardmässig wird aufwärts sortiert.

Hier ein Beispielaufruf:

Sorter('#products','li.productbit','.rating','desc');

...sortiert die von dir gepostete Liste absteigend nach .rating


Falls alle zu sortierenden Felder einen numerischen Wert enthalten, wird numerisch sortiert, ansonsten lexikalisch.

Man kann damit eigentlich alles sortieren, nicht nur Listen, sondern bspw. auch Tabellen

 

[Gernott]

Hi Sven,
vielen Dank für diese tolle Funktion!! Funktioniert echt genial!
Ich habe nur noch einen offenen Punkt: Die Preise werden alphabetisch sortiert.
ZB so: 1, 11, 122, 2, 3, 44, 5, 512
Statt so: 1, 2, 3, 5, 11, 44, 122, 512
Kannst du mir hier noch einen Tipp geben? Der Code Deiner Funktion ist mir etwas zu steil :-(

Vielen Dank
Gernott

 

[Quaese]

Hi,

du könntest z.B. an den entsprechenden Stellen die Methode parseFloat aufrufen. Damit wandelst du den Inhalt in eine Fliesskommazahl um, wenn es dieser zulässt. Hierbei gilt aber zu beachten, dass das Dezimalzeichen ein Punkt und kein Komma ist. Weitere Informationen findest du auf SelfHTML.

Beispiel:

function Sorter(listSelector,itemSelector,orderSelector,order)
{
  var items=$(listSelector).clone(true).find(itemSelector);

  items.sort(($.grep(items,function(e){return isNaN(parseFloat($(e).find(orderSelector).eq(0).text()));}).length)
              ?(function(a,b)
              {
                var c=(order=='desc')?[b,a]:[a,b];
                return ($(c[0]).find(orderSelector).eq(0).text()>$(c[1]).find(orderSelector).eq(0).text())?1:-1;
              })
              :(function(a,b)
              {
                var c=(order=='desc')?[b,a]:[a,b];
                return (parseFloat($(c[0]).find(orderSelector).eq(0).text())-parseFloat($(c[1]).find(orderSelector).eq(0).text()));
              })
            );

   for(var i=0;i<items.length;++i)
   {
     $(listSelector+' '+itemSelector).eq(i).replaceWith(items[i]);
   }
}

Ciao
Quaese