名前でシンプルなソートDIVと番号

Question

名前と番号でバニラJSを使用してdivをソートしたいと思います。私はリストをソートする前に、これは問題ではありませんが、ここで私はこれを行う方法に問題があります。 オブジェクトを作成し、すべての値を保存してオブジェクトをソートする必要がありますか？ あなたがそれらを並べ替えることができcuzを今私しようとしたループやアイテムが、私はこのためにフレキシボックスを使用する「アイテム」に

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

をアイテム価格または項目名を取得することはできませんが、役に立つかもしれません順序と、それはあなたに再レンダリングとビットとピースの移動をたくさん保存します

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>