按名称和数字简单排序DIV

Question

我想使用vanilla JS按名称和编号对我的div进行排序。在我排序列表之前，这不是问题，但在这里我有一个问题如何做到这一点。 也许需要创建对象，并将所有值保存给他，然后排序对象？ 现在我尝试循环或项目，但我无法在＆＃39;项目中获得商品价格或商品名称

＆＃13;

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用flexbox这可能很有用，因为你可以按顺序重新排列它们，它会为你节省大量的重新渲染和移动位和碎片

灵活布局会让它的行为略有不同。所以你可能需要修改一下css。

如果你有输入，那么标签索引可能不是你所期望的那样。

＆＃13;

＆＃13;

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);

＆＃13;

.items {
  display: flex;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;