javascript - javascript：如何按子项的内容对 div 进行排序

Question

看到了一些类似的问题，但它们是针对 jquery 或未回答的。想知道是否有可能，甚至值得，在 vanilla js 中按子级的 innerHTML 对 div 进行排序。也许这是我应该留给像list js这样的插件的东西。

我希望对渲染的元素进行排序，如果可能的话，我不想将所有 div 重写为 json 对象。

这是我设置的我正在尝试做的模板：https ://jsfiddle.net/ssccdd/9Lo2xy0s/4/

window.onload = function() {
  const  desc = false;
  const divs = document.getElementsByClassName("item"); 
  let arr=[];
  for(let i=0; i< divs.length; i++){
    arr.push(divs[i].getAttribute('data-ticker'));
  }
  console.log(arr)

  sortName = () => {
    console.log('sorting by name');
  }

  sortNumber = () => {
    console.log('sorting by number');
  }

  sortPrice = () => {
    console.log('sorting by price');
  }

  trimChars = (word) => {
    return parseFloat(word.replace(/[^0-9.]/g, ""));
  }
  
  document.getElementById("name").addEventListener("click", sortName);  
  document.getElementById("number").addEventListener("click", sortNumber);  
  document.getElementById("price").addEventListener("click", sortPrice); 
}

.item{
  font-family: Arial;
  font-size: 1.5rem;
  border: 4px solid cornflowerblue;
  margin: 2rem 0;
  padding: 1rem;
  width: 90%;
}

Sort by 
<button id="Name">name</button>
<button id="Number">number</button>
<button id="Price">price</button>

<div id="container">
  
  <div class="item" data-ticker="AAR">
    <div class="name">Asparagus salad</div>
    <div class="number">1</div>
    <div class="price">$10</div>
  </div>
  
  <div class="item" data-ticker="BUT">
    <div class="name">Bacon sandwich</div>
    <div class="number">6</div>
    <div class="price">$3.23</div>
  </div>
  
  <div class="item" data-ticker="CAT">
    <div class="name">Carrot cake</div>
    <div class="number">9</div>
    <div class="price">$4.12</div>
  </div>
  
  <div class="item" data-ticker="WHA">
    <div class="name">Whiskey</div>
    <div class="number">5</div>
    <div class="price">$12</div>
  </div>
  
</div>

关于如何解决这个问题的任何建议？

标签： javascriptsorting

Answer 1

这边走：

const
    containerRef = document.querySelector('#container')
  , items = [...containerRef.querySelectorAll('div.item')]
              .map(item=>
                ({ name  : item.querySelector('.name').textContent
                , number : Number(item.querySelector('.number').textContent)
                , price  : parseFloat(item.querySelector('.price').textContent.replace(/[^0-9.]/g,''))
                , itmRef : item
                }))

document.getElementById('Name').onclick = () =>
  {
  items.sort((a,b)=>a.name.localeCompare(b.name))
        .forEach(el=>containerRef.appendChild(el.itmRef) )
  } 
document.getElementById('Number').onclick = () =>
  {
  items.sort((a,b)=>a.number - b.number)
        .forEach(el=>containerRef.appendChild(el.itmRef) )
  } 
document.getElementById('Price').onclick = () =>
  {
  items.sort((a,b)=>a.price - b.price)
        .forEach(el=>containerRef.appendChild(el.itmRef) )
  }

.item{
  font-family: Arial;
  font-size: 1.5rem;
  border: 4px solid cornflowerblue;
  margin: 2rem 0;
  padding: 1rem;
  width: 90%;
}

Sort by 
<button id="Name">name</button>
<button id="Number">number</button>
<button id="Price">price</button>

<div id="container">
  
  <div class="item" data-ticker="AAR">
    <div class="name">Asparagus salad</div>
    <div class="number">1</div>
    <div class="price">$10</div>
  </div>
  
  <div class="item" data-ticker="BUT">
    <div class="name">Bacon sandwich</div>
    <div class="number">6</div>
    <div class="price">$3.23</div>
  </div>
  
  <div class="item" data-ticker="CAT">
    <div class="name">Carrot cake</div>
    <div class="number">9</div>
    <div class="price">$4.12</div>
  </div>
  
  <div class="item" data-ticker="WHA">
    <div class="name">Whiskey</div>
    <div class="number">5</div>
    <div class="price">$12</div>
  </div>
  
</div>