Элементы сортировки на странице с выбранным параметром без использования JQuery

Question

Я хочу отсортировать элементы на странице html, выбрав опцию в теге select с помощью javascript. Например. когда я выбираю опцию «СТОИМОСТЬ», элементы в тегах статьи сортируются по стоимости в теге 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 или любой тип элемента, который вы хотите.

Second, используйте классы соответствующих элементов, в соответствии с которыми вы хотите сортировать, в качестве значения параметров выбора тега. Поэтому в соответствии с вашим примером мы будем использовать item_title, item_price в качестве значений опций select tag.

Теперь просмотрите полный код, он будет сортировать статьи в соответствии с выбранным вариантом, вы обязательно поймете. Например, я сократил ваши статьи.

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>

Answer 2

Вы можете изменить HTML для:

<p class="sort-label">SORT BY: <span id="sort-value"> </span></p> 
<select id="select-sorting" onchange="changeSorting()"> 
    <option value="cost">COST</option> 
    <option value="name">NAME</option> 
</select> 

И добавьте к этому JavaScript:

function changeSorting() { 
    var sortBy = document.getElementById("select-sorting").value; 
    document.getElementById("sort-value").innerHTML(sortBy); 
}