How to sort li's algorithm merge sort?

There is such a list:
<ul class="items">
 {% for item in items %}
 <li data-sort="{{item.price}}">
 <a href="{{item.link}}">
 <span class="title">{{item.title}}</span>
 <div class="price">
 <span class="num">{{item.price}}</span>
</div>
</a>
</li>
 {% endfor %}
 </ul>

You want to sort by attribute data-sort (duplicated price of span).
Implemented using bubble sort thus:
bubble sort
var items = document.querySelector('.items')
function sortAsc()
{
 for(let i = 0; i<items.children.length; i++)
{
 for(let j = i; j<items.children.length; j++)
{
 if(+items.children[i].getAttribute('data-sort') > +items.children[j].getAttribute('data-sort'))
{
 replacedNode = items.replaceChild(items.children[j], items.children[i]);
 insertAfter(replacedNode, items.children[i]);
}
}
}
}

function insertAfter(elem, refElem)
{
 return refElem.parentNode.insertBefore(elem,refElem.nextSibling)
}

But the bubble - this is not the case. I need to do this using Merge Sort. Here is the algorithm for a simple pattern (but for some reason he does not change the array, it displays the original array):
Merge sort
function mergeSort (unsortedArray) {
 // No need to sort the array if the array only has one element or empty
 if (unsortedArray.length <= 1) {
 return unsortedArray;
}
 // In order to divide the array in half, we need to figure out the middle
 const middle = Math.floor(unsortedArray.length / 2);

 // This is where we will be dividing the array into left and right
 const left = unsortedArray.slice(0, middle);
 const right = unsortedArray.slice(middle);

 // Using recursion to combine the left and right
 return merge(
 mergeSort(left), mergeSort(right)
);
}
function merge (left, right) {
 let resultArray = [], leftIndex = 0, rightIndex = 0;

 // We will concatenate the values into resultArray in order
 while (leftIndex < left.length && rightIndex < right.length) {
 if (left[leftIndex] < right[rightIndex]) {
resultArray.push(left[leftIndex]);
 leftIndex++; // move left cursor array
 } else {
resultArray.push(right[rightIndex]);
 rightIndex++; // move cursor right array
}
}

 // We need to concat here because there will be one element remaining
 // from either left OR the right
 return resultArray
.concat(left.slice(leftIndex))
.concat(right.slice(rightIndex));
}



I would be grateful if you help to adapt the Algorithm to my problem. Tomorrow's the deadline, all hope for you.
P. S. the idea was to put the data in an array of li objects (create a class), sort it, and then the new display on the page in the form of li. But do not have enough knowledge of JS to do this.
April 4th 20 at 13:15
1 answer
April 4th 20 at 13:17
alert(mergesort([10,9,8,232,437,6,5435,4,3]));//example
function mergesort(m){
 return m.length <= 1? m: merge(mergesort(m.splice(0,Math.floor(m.length / 2))), mergesort(m.splice(0)))
}

function merge(left,right){
 var result = [];
 while (left.length > 0 && right.length > 0){
 if (left[0] <= right[0]){
result.push(left[0]);
left.splice(0,1);
}
else{
result.push(right[0]);
right.splice(0,1);
}
}
 return result.concat(left).concat(right); 
 }

Well, I need to sort before the page output, because it lost all the sorting logic.
function sortList(){
document.querySelectorAll(".items").forEach(itemsCont=>{
 var items = Array.from(itemsCont.querySelectorAll("li"));
 var arr = [];
items.forEach(el=>arr.push(parseInt(el.getAttribute("data-sort"))));
 arr = mergesort(arr);
 //arr = arr.sort(); //Better to use sort instead of mergesort runs about 20 times faster, tested
arr.reverse().forEach(inx=>{
itemsCont.prepend(items.find((el,i,arra)=>{
 if(el.getAttribute("data-sort") == inx){
items.splice(i,1);
 return el;
}
}));
});
});
 }
Not really. I could easily sort the sheet in Python before generating the HTML, but the point is that I choose the sort method using the select and need to do this dynamically so that the page was not reloaded. It really all make? Or to drop the case? - herman58 commented on April 4th 20 at 13:20
@herman58, Like when you click the select load items from the server? - immanuel81 commented on April 4th 20 at 13:23
@immanuel81, no, on the page rearranged. Parerchomai sortirai and
replacedNode = items.replaceChild(items.children[j], items.children[i]);
insertAfter(replacedNode, items.children[i]);

these methods I have achieved the result that I need, but I need it merge sort. - herman58 commented on April 4th 20 at 13:26
@herman58, why is merge sort? And that there are hundreds of thousands of items? - immanuel81 commented on April 4th 20 at 13:29
@immanuel81, Well you can, and quick sort, but I don't think it will change something. No, there is not a million elements, but this is for University, and I can't use bubble sort (want to me made fun of? D ) or the standard sorting function. - herman58 commented on April 4th 20 at 13:32
@immanuel81, Your solution works. Thank you very much! - herman58 commented on April 4th 20 at 13:35

Find more questions by tags JavaScript