Einfache Sortierung DIV nach Name und Nummer

Question

Ich möchte meine div mit Vanille JS nach Name und Nummer zu sortieren. Bevor ich nur Liste sortiere, und das ist kein Problem, aber hier habe ich ein Problem, wie dies zu tun ist. Vielleicht brauchen Sie ein Objekt erstellen, und speichern Sie alle Wert für ihn, und dann Objekt sortieren? Jetzt versuche ich Schleife oder Gegenstände, aber ich kann nicht Artikel-Preis oder Artikel-Name in ‚item‘

var sortByNameBtn = document.getElementById('sortByName'); 
 
var sortByPriceBtn = document.getElementById('sortByPrice'); 
 

 
function sortingByName(){ 
 
    var items = document.querySelectorAll('.item'); 
 
    
 
} 
 

 
function sortingByPrice(){ 
 
    var items = document.querySelectorAll('.item'); 
 

 
} 
 

 
sortByNameBtn.addEventListener('click', sortingByName); 
 
sortByPriceBtn.addEventListener('click', sortingByPrice);

.item { 
 
    background: #eee; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
}

<div class="items"> 
 
    <div class="item"> 
 
    <div class="item-price">12321</div> 
 
    <div class="item-name">Car</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">123</div> 
 
    <div class="item-name">Table</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">88</div> 
 
    <div class="item-name">Toys</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">1223</div> 
 
    <div class="item-name">Window</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">19</div> 
 
    <div class="item-name">Bad</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">50</div> 
 
    <div class="item-name">Mouse</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">500</div> 
 
    <div class="item-name">iPhone</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">100</div> 
 
    <div class="item-name">Mobile</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">12</div> 
 
    <div class="item-name">Cake</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">500</div> 
 
    <div class="item-name">Laptop</div> 
 
    </div> 
 
</div> 
 

 
<p> 
 
    <button id="sortByName">Sort by name</button> 
 
</p> 
 
<p> 
 
    <button id="sortByPrice"> 
 
    Sort By price 
 
</button> 
 
</p>

Answer 1

Mit Flexbox hierfür könnte nützlich sein, weil du neu ordnen sie bekommen können mit der Bestellung, und es wird sparen Sie eine Menge von Rendern und Verschieben von Bits und Stücken

Doe die Flex-Layout wird es ein wenig anders verhalten. Also musst du vielleicht das CSS ein bisschen reparieren.

Auch der Tab-Index ist möglicherweise nicht das, was Sie erwarten, wenn Sie Eingaben haben und was nicht.

var sortByNameBtn = document.getElementById('sortByName'); 
 
var sortByPriceBtn = document.getElementById('sortByPrice'); 
 

 
function sortingByName() { 
 
    var items = document.querySelectorAll('.item'); 
 

 
    // get all items as an array and call the sort method 
 
    Array.from(items).sort(function(a, b) { 
 
    // get the text content 
 
    a = a.querySelector('.item-name').innerText.toLowerCase() 
 
    b = b.querySelector('.item-name').innerText.toLowerCase() 
 
    return (a > b) - (a < b) 
 
    }).forEach(function(n, i) { 
 
    n.style.order = i 
 
    }) 
 

 
} 
 

 
function sortingByPrice(){ 
 
    var items = document.querySelectorAll('.item') 
 
    
 
    Array.from(items).sort(function(a, b) { 
 
    // using ~~ to cast the value to a number instead of a string 
 
    a = ~~a.querySelector('.item-price').innerText 
 
    b = ~~b.querySelector('.item-price').innerText 
 
    return a - b 
 
    }).forEach(function(n, i) { 
 
    n.style.order = i 
 
    }) 
 
} 
 

 
sortByNameBtn.addEventListener('click', sortingByName); 
 
sortByPriceBtn.addEventListener('click', sortingByPrice);

.items { 
 
    display: flex; 
 
} 
 

 
.item { 
 
    background: #eee; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
}

<div class="items"> 
 
    <div class="item"> 
 
    <div class="item-price">12321</div> 
 
    <div class="item-name">Car</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">123</div> 
 
    <div class="item-name">Table</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">88</div> 
 
    <div class="item-name">Toys</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">1223</div> 
 
    <div class="item-name">Window</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">19</div> 
 
    <div class="item-name">Bad</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">50</div> 
 
    <div class="item-name">Mouse</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">500</div> 
 
    <div class="item-name">iPhone</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">100</div> 
 
    <div class="item-name">Mobile</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">12</div> 
 
    <div class="item-name">Cake</div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="item-price">500</div> 
 
    <div class="item-name">Laptop</div> 
 
    </div> 
 
</div> 
 

 
<p> 
 
    <button id="sortByName">Sort by name</button> 
 
</p> 
 
<p> 
 
    <button id="sortByPrice"> 
 
    Sort By price 
 
</button> 
 
</p>