按名称简单排序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>