1. Zuhause
  2. Frage und Antwort
  3. Sortieren von HTML-Elementen

Sortieren von HTML-Elementen

2016-04-01 10 views
0

Wie würden Sie die folgenden Elemente je nach gewählter Option am besten nach Datenattributen sortieren?Sortieren von HTML-Elementen

<select class="form-control" id="orderBy"> 
    <option value="0">Default</option> 
    <option value="1">Price Descending</option> 
    <option value="2">Price Ascending</option> 
    <option value="3">Name A-Z</option> 
</select> 

    <div id="items"> 

    <div class="col-sm-2 text-center" data-name="Sticker | boltz (Foil) | Cluj-Napoca 2015" data-position="0" data-bot="2" data-coins="630" data-itemid="5538264193"> 
     <div class="bank_item" style="position:relative;border:2px solid black" data-name="Sticker | boltz (Foil) | Cluj-Napoca 2015" data-position="0" data-bot="2" data-coins="630" data-itemid="5538264193"> 
      <div class="bank_bot">#2</div> 
      <div class="bank_itemprice">630 coins</div><img class="img-responsive center-block" src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXQ9QVcJY8gulReQFnaFbT8goDAWlpLJwtboqCaLQhp373JIzlH7t7kwtDZwPKmMe7UxGlVv5Uni-qVrI-g3wbgqUs5MDuhJtWXbEZgNlgEOFRc/150x150"> 
      <div class="bank_name" style="color:white">Sticker | boltz (Foil) | Cluj-Napoca 2015</div> 
     </div> 
    </div> 
    <div class="col-sm-2 text-center" data-name="Sticker | JW | Cluj-Napoca 2015" data-position="1" data-bot="1" data-coins="550" data-itemid="5649200610"> 
     <div class="bank_item" style="position:relative;border:2px solid black" data-name="Sticker | JW | Cluj-Napoca 2015" data-position="1" data-bot="1" data-coins="550" data-itemid="5649200610"> 
      <div class="bank_bot">#1</div> 
      <div class="bank_itemprice">550 coins</div><img class="img-responsive center-block" src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXQ9QVcJY8gulReQFnaFbT8goDAWlpLLxMZsuz2eVRmgaWbKT4a747ixdXSlKKjZe7SwD1VsMMoiLuUoo2ijAewr10sPT7nQSOp_Q/150x150"> 
      <div class="bank_name" style="color:white">Sticker | JW | Cluj-Napoca 2015</div> 
     </div> 
    </div> 
    <div class="col-sm-2 text-center" data-name="Sticker | DreamHack | Cluj-Napoca 2015" data-position="2" data-bot="2" data-coins="550" data-itemid="5626585817"> 
     <div class="bank_item" style="position:relative;border:2px solid black" data-name="Sticker | DreamHack | Cluj-Napoca 2015" data-position="2" data-bot="2" data-coins="550" data-itemid="5626585817"> 
      <div class="bank_bot">#2</div> 
      <div class="bank_itemprice">550 coins</div><img class="img-responsive center-block" src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXQ9QVcJY8gulReQFnaFbT8goDXW146cwFU5uP3f1Ixi_HMcm9GuN_hwIGNk6-gYuPQwDpUu5xzj-zC99Xw0BqkpRTbClhRtg/150x150"> 
      <div class="bank_name" style="color:white">Sticker | DreamHack | Cluj-Napoca 2015</div> 
     </div> 
    </div> 
    <div class="col-sm-2 text-center" data-name="Autograph Capsule | Natus Vincere | Cluj-Napoca 2015" data-position="3" data-bot="2" data-coins="480" data-itemid="5623512673"> 
     <div class="bank_item" style="position:relative;border:2px solid black" data-name="Autograph Capsule | Natus Vincere | Cluj-Napoca 2015" data-position="3" data-bot="2" data-coins="480" data-itemid="5623512673"> 
      <div class="bank_bot">#2</div> 
      <div class="bank_itemprice">480 coins</div><img class="img-responsive center-block" src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fROi43Z2DAghLKwVBv_T8cwYy1vWeJW5D6orildnTlq-ga-yIkzMDvJMg2bCT9tul3AWy_EVofSmtc3pMizym/150x150"> 
      <div class="bank_name" style="color:white">Autograph Capsule | Natus Vincere | Cluj-Napoca 2015</div> 
     </div> 
    </div> 
</div>

Ich habe versucht, TinySort verwenden, aber aber es nicht funktioniert oder ich mache etwas falsch.

$('#orderBy').on('change',function(){ 
    var by = $(this).val(); 
    switch(by) 
    { 
     case 1: tinysort('#items .col-sm-2',{data:'coins',order:'desc'}); break; 
     case 2: tinysort('#items .col-sm-2',{data:'coins',order:'asc'}); break; 
     case 3: tinysort('#items .col-sm-2',{data:'name',order:'asc'}); break; 
     default: tinysort('#items .col-sm-2',{data:'position',order:'asc'}); 
    } 
});

Wenn Sie eine Option auswählen, geschieht nichts. Gibt es eine einfache Möglichkeit, sie zu sortieren? Dank

EDIT: Dies ist, wie es im Moment aussieht: enter image description here

Quelle

2016-04-01 Nedas

+0

einige csgo Sachen hier los mmm: D –

+0

@MattiaNocerino ja Bitte keine Offtopic. – Nedas

Antwort

2

Das Problem ist, dass $(this).val() eine String, keine Nummer zurückgibt.

Sie müssen Änderung 1-"1" und derselben in anderen Fällen in der switch-case.

Snippet des Codes arbeiten:

$('#orderBy').on('change', function() { 
 
    var by = $(this).val(); 
 
    switch (by) { 
 
    case "1": 
 
     tinysort('#items .col-sm-2', { 
 
     data: 'coins', 
 
     order: 'desc' 
 
     }); 
 
     break; 
 
    case "2": 
 
     tinysort('#items .col-sm-2', { 
 
     data: 'coins', 
 
     order: 'asc' 
 
     }); 
 
     break; 
 
    case "3": 
 
     tinysort('#items .col-sm-2', { 
 
     data: 'name', 
 
     order: 'asc' 
 
     }); 
 
     break; 
 
    default: 
 
     tinysort('#items .col-sm-2', { 
 
     data: 'position', 
 
     order: 'asc' 
 
     }); 
 
    } 
 
});
#items{ 
 
    background-color: #212121; 
 
    color: white; 
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.0/tinysort.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.0/jquery.tinysort.js"></script> 
 
<select class="form-control" id="orderBy"> 
 
    <option value="0">Default</option> 
 
    <option value="1">Price Descending</option> 
 
    <option value="2">Price Ascending</option> 
 
    <option value="3">Name A-Z</option> 
 
</select> 
 

 
<div id="items"> 
 

 
    <div class="col-sm-2 text-center" data-name="Sticker | boltz (Foil) | Cluj-Napoca 2015" data-position="0" data-bot="2" data-coins="630" data-itemid="5538264193"> 
 
    <div class="bank_item" style="position:relative;border:2px solid black" data-name="Sticker | boltz (Foil) | Cluj-Napoca 2015" data-position="0" data-bot="2" data-coins="630" data-itemid="5538264193"> 
 
     <div class="bank_bot">#2</div> 
 
     <div class="bank_itemprice">630 coins</div> 
 
     <img class="img-responsive center-block" src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXQ9QVcJY8gulReQFnaFbT8goDAWlpLJwtboqCaLQhp373JIzlH7t7kwtDZwPKmMe7UxGlVv5Uni-qVrI-g3wbgqUs5MDuhJtWXbEZgNlgEOFRc/150x150"> 
 
     <div class="bank_name" style="color:white">Sticker | boltz (Foil) | Cluj-Napoca 2015</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-2 text-center" data-name="Sticker | JW | Cluj-Napoca 2015" data-position="1" data-bot="1" data-coins="550" data-itemid="5649200610"> 
 
    <div class="bank_item" style="position:relative;border:2px solid black" data-name="Sticker | JW | Cluj-Napoca 2015" data-position="1" data-bot="1" data-coins="550" data-itemid="5649200610"> 
 
     <div class="bank_bot">#1</div> 
 
     <div class="bank_itemprice">550 coins</div> 
 
     <img class="img-responsive center-block" src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXQ9QVcJY8gulReQFnaFbT8goDAWlpLLxMZsuz2eVRmgaWbKT4a747ixdXSlKKjZe7SwD1VsMMoiLuUoo2ijAewr10sPT7nQSOp_Q/150x150"> 
 
     <div class="bank_name" style="color:white">Sticker | JW | Cluj-Napoca 2015</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-2 text-center" data-name="Sticker | DreamHack | Cluj-Napoca 2015" data-position="2" data-bot="2" data-coins="550" data-itemid="5626585817"> 
 
    <div class="bank_item" style="position:relative;border:2px solid black" data-name="Sticker | DreamHack | Cluj-Napoca 2015" data-position="2" data-bot="2" data-coins="550" data-itemid="5626585817"> 
 
     <div class="bank_bot">#2</div> 
 
     <div class="bank_itemprice">550 coins</div> 
 
     <img class="img-responsive center-block" src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXQ9QVcJY8gulReQFnaFbT8goDXW146cwFU5uP3f1Ixi_HMcm9GuN_hwIGNk6-gYuPQwDpUu5xzj-zC99Xw0BqkpRTbClhRtg/150x150"> 
 
     <div class="bank_name" style="color:white">Sticker | DreamHack | Cluj-Napoca 2015</div> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-2 text-center" data-name="Autograph Capsule | Natus Vincere | Cluj-Napoca 2015" data-position="3" data-bot="2" data-coins="480" data-itemid="5623512673"> 
 
    <div class="bank_item" style="position:relative;border:2px solid black" data-name="Autograph Capsule | Natus Vincere | Cluj-Napoca 2015" data-position="3" data-bot="2" data-coins="480" data-itemid="5623512673"> 
 
     <div class="bank_bot">#2</div> 
 
     <div class="bank_itemprice">480 coins</div> 
 
     <img class="img-responsive center-block" src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fROi43Z2DAghLKwVBv_T8cwYy1vWeJW5D6orildnTlq-ga-yIkzMDvJMg2bCT9tul3AWy_EVofSmtc3pMizym/150x150"> 
 
     <div class="bank_name" style="color:white">Autograph Capsule | Natus Vincere | Cluj-Napoca 2015</div> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2016-04-01 16:43:11

0

nicht sicher, wie Sie Ihre Daten bekommen, aber ich würde vorschlagen bootstrap tables versuchen. Es macht es schön und passt gut zum Daten ziehen und kann es auch für Sie sortieren. Die examples sind auch hilfreich, wenn Sie es betrachten möchten.

Quelle

2016-04-01 16:25:33 jumper

+0

Ich benutze sie an vielen Orten, aber ich brauche keinen Tisch. Ich muss stattdessen separate Boxen haben. Ich werde ein Bild hinzufügen, wie es im Moment aussieht. – Nedas

1

Und mit der Sortierfunktion:

$('#orderBy').on('change',function(){ 
    var by = $(this).val(); 
    switch (by){ 
     case '1': 
      tinysort('#items .col-sm-2',{data:'coins',order:'desc'}) 
      break 
     case '2': 
      tinysort('#items .col-sm-2',{data:'coins',order:'asc'}) 
      break 
     case '3': 
      tinysort('#items .col-sm-2',{data:'name',order:'asc'}) 
      break 
     default: 
      tinysort('#items .col-sm-2',{data:'position',order:'asc'}) 
    } 
}); 
function tinysort(target, type){ 
    var arr = $(target); 
    arr.sort(function (a, b) { 
    var x = $(a).data(type.data); 
    var y = $(b).data(type.data); 

    if(x > y) { 
     return type.order=='asc'? 1:-1; 
    } else if(x < y) { 
     return type.order=='asc'? -1:1; 
    } else { 
     return 0; 
    } 
    }); 
    $('#items').html(arr); 
}

Quelle

2016-04-01 19:14:24

Verwandte Themen

 Verwandte Themen