Sortieren divs mit Daten-Attribute und Javascript

Ich bin neu in Javascript und kann nicht scheinen, eine Lösung zu finden, also bitte vergib mir, wenn dies bereits beantwortet wurde.Sortieren divs mit Daten-Attribute und Javascript

Ich habe eine Liste von divs (sagen wir, das sind Produkte von verschiedenen farbigen Socken). Ich möchte, dass Benutzer in der Lage sind, auf Schaltflächen zu klicken und diese divs nach Preis und Beliebtheit basierend auf Datenattributen jedes div zu sortieren, ohne Arrays zu verwenden.

Hier ist meine aktuelle JSFiddle: https://jsfiddle.net/4z97xffh/

var divList = $(".listing-item"); 
 

 
function sortPrice(){ 
 
divList.sort(function(a, b){ return $(a).data("price")-$(b).data("price")});  
 
$("#list").html(divList);} 
 

 
function sortPopularity(){ 
 
divList.sort(function(a, b){ return $(a).data("popularity")-$(b).data("popularity")});  
 
$("#list").html(divList);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button onclick="sortPrice()">Sort by price Low -&gt; High</button> 
 
<button onclick="sortPopularity()">Sort by Popularity Low -&gt; High</button> 
 
    
 
<div id="list"> 
 
    <div class="listing-item" data-price="4" data-popularity="4">[Red Socks] Price: $4 | Popularity: 3</div> 
 
    <div class="listing-item" data-price="2" data-popularity="2">[Blue Socks] Price: $2 | Popularity: 1</div> 
 
    <div class="listing-item" data-price="1" data-popularity="1">[Green Socks] Price: $1 | Popularity: 2</div> 
 
    <div class="listing-item" data-price="3" data-popularity="3">[Yellow Socks] Price: $3 | Popularity: 4</div> 
 
</div>

Quelle

2016-07-20 John

Sie haben nicht jQuery in Ihrem JSFiddle enthalten. Sie haben das JSFiddle nicht so eingestellt, dass das JS im '' Teil enthalten ist. Es gibt keine Sortiermethode für jQuery. In '$ (a) .data (" price ") - $ (b) .data (" price ")' (und im äquivalent zu "popularity") subtrahierst du _strings_, ohne sie in Zahlen umzuwandeln. Vielleicht hilft das: [Sortieren einer Liste nach Datenattribut] (http://stackoverflow.com/a/32199776/4642212). – Xufox

Ich habe Ihren Post bearbeitet, um ein ausführbares Snippet zu erhalten, aber ich werde mich in der Antwort unten auf Ihr Problem konzentrieren. – doctorless

Das Problem ist nicht mit Ihrem Code, sondern mit Ihren Attributen. Ihre Popularitätswerte stimmen nicht mit den Werten innerhalb der <div> s überein.

Unten finden Sie ein Ausschnitt mit den Ihren Text passenden Werte:

var divList = $(".listing-item"); 
 

 
function sortPrice(){ 
 
divList.sort(function(a, b){ return $(a).data("price")-$(b).data("price")});  
 
$("#list").html(divList);} 
 

 
function sortPopularity(){ 
 
divList.sort(function(a, b){ return $(a).data("popularity")-$(b).data("popularity")});  
 
$("#list").html(divList);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button onclick="sortPrice()">Sort by price Low -&gt; High</button> 
 
<button onclick="sortPopularity()">Sort by Popularity Low -&gt; High</button> 
 
    
 
<div id="list"> 
 
    <div class="listing-item" data-price="4" data-popularity="3">[Red Socks] Price: $4 | Popularity: 3</div> 
 
    <div class="listing-item" data-price="2" data-popularity="1">[Blue Socks] Price: $2 | Popularity: 1</div> 
 
    <div class="listing-item" data-price="1" data-popularity="2">[Green Socks] Price: $1 | Popularity: 2</div> 
 
    <div class="listing-item" data-price="3" data-popularity="4">[Yellow Socks] Price: $3 | Popularity: 4</div> 
 
</div>

Quelle

2016-07-20 00:37:48 doctorless

danke drheart diese Lösung funktioniert super – John

Sortieren divs mit Daten-Attribute und Javascript

Antwort

Verwandte Themen