按名稱簡單排序DIV，並且編號

Question

我想按名稱和編號使用vanilla JS對我的div進行排序。之前我排序只列表，這不是一個問題，但在這裏我有一個問題，如何做到這一點。 也許需要創建對象，並保存所有值給他，然後排序對象？ 現在我試圖環或項目，但我不能讓項目的價格或項目名稱的「項目」

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

使用Flexbox的這可能是因爲你可以重新排列它們有用隨着訂單，它會爲您節省大量的重新渲染和移動鑽頭和零件

Doe柔性佈局將使其行爲有點不同。所以你可能需要修復一下css。

此外，如果您有輸入而不是您所期望的選項卡索引。

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>