javascript - 使用所选选项对页面上的元素进行排序，而不使用 JQuery

Question

我想通过使用 javascript 在 select 标记中选择一个选项来对 html 页面上的元素进行排序。例如。当我选择“COST”选项时，文章标签中的元素按 p 标签中的成本排序，并按排序顺序显示。我现在如何使用 jQuery 来做到这一点，但是如果没有它我该如何做到这一点呢？

文章部分

<article class="item_box">
    <p class="item_title">WIDGET 01</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p data-num='1' id="article1" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article1').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article1').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">4232</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="01">BUY</button>
</article>
<article class="item_box">
    <p class="item_title">WIDGET 02</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p  id="article2" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article2').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article2').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">4242</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="02">BUY</button>
</article>
<article class="item_box">
    <p class="item_title">WIDGET 03</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p id="article3" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article3').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article3').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">65</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="03">BUY</button>
</article>
<article class="item_box">
    <p class="item_title">WIDGET 04</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p id="article4" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article4').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article4').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">213</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="04">BUY</button>
</article>
<article class="item_box">
    <p class="item_title">WIDGET 05</p>
    <img class="this1" src="images/layer4.png" alt="item">
    <p class="quan">QUANTITY</p>
    <p id="article5" class="number2">0</p>
    <button class="plus" onclick="document.getElementById('article5').innerHTML=increment()">+</button>
    <button class="minu" onclick="document.getElementById('article5').innerHTML=decrement()">-</button>
    <p class="amount"><span class="item_price">5321</span></p>
    <button class="add_item" onclick="document.getElementById('number').innerHTML=increment()" data-id="05">BUY</button>
</article>

HTML 选择

<p class="sort21">SORT BY:</p>
        <select id="selectop">
            <option value="1">COST</option>
            <option value="2">NAME</option>
        </select>

Answer 1

首先，您必须将所有文章插入 div 或您想要的任何类型的元素中。

第二，使用要排序的相应元素的类作为选择标签选项的值。因此，根据您的示例，我们将使用 item_title、item_price 作为选择标签选项的值。

现在看完整的代码，它会根据选择的选项对文章进行排序，你一定会明白的。例如，我已经缩短了您的文章。

function sort(sortBy) {
  var items = document.getElementsByClassName("item_box");

  // getElementsByClassName returns object. make it a array to use sort function
  var itemsArr = [];
  for (var i in items) {
    if (items[i].nodeType == 1) { // consider elements only
      itemsArr.push(items[i]);
    }
  }

  var sorted = itemsArr.sort(function (a, b) {
    a = a.getElementsByClassName(sortBy)[0].innerHTML;
    b = b.getElementsByClassName(sortBy)[0].innerHTML;
    
    //decide whether need number sort or string sort
    if(isNaN(a) || isNaN(b)) 
      return a.localeCompare(b);
    else
      return a-b;
  });

  for (i = 0; i < sorted.length; ++i) {
    document.getElementById("items").appendChild(sorted[i]);
  }
}

<div id="items">
  <article class="item_box">
    <p class="item_title">WIDGET 01</p>
    <p class="amount"><span class="item_price">4232</span></p>
  </article>
  <article class="item_box">
    <p class="item_title">WIDGET 02</p>
    <p class="amount"><span class="item_price">4242</span></p>
  </article>
  <article class="item_box">
    <p class="item_title">WIDGET 03</p>
    <p class="amount"><span class="item_price">65</span></p>
  </article>
  <article class="item_box">
    <p class="item_title">WIDGET 04</p>
    <p class="amount"><span class="item_price">213</span></p></button>
  </article>
<article class="item_box">
  <p class="item_title">WIDGET 05</p>
  <p class="amount"><span class="item_price">5321</span></p>
</article>  
</div>

<p class="sort21">SORT BY:</p>
<select id="selectop" onchange="sort(this.value)">
  <option value="item_title">NAME</option>
  <option value="item_price">COST</option>
</select>