Sorting HTML structure
I am trying to sort a div structure based on a parameter using a little javscript I found.
It doesn't seem to work exactly as expected. I understand that the sort function does not fully parse the values ...
This is the sorting logic - this is the use ...
<script type="text/javascript">
// Sorting Logic
$(function() {
$("a[href*=#]").click(function(e) {
e.preventDefault();
var liContents = [];
$('#ProductPrice span[id*="ABSPrice"]').each(function() {
liContents.push($(this).html());
});
liContents.sort(numOrdDesc);
$('#ProductPrice span[id*="ABSPrice"]').each(function() {
$(this).html(liContents.pop());
});
});
});
function numOrdDesc(a, b) {
return (parseInt(b) - parseInt(a));
}
// End
sorting logic Since I am not able to place the html exactly, I am going to add a link to the actual website where you can see what this action is. Can anyone point out where I am going wrong?
http://www.absbiz.co.uk/Products/tabid/85/rvdsfcatid/Modems-437/Default.aspx
EDIT: Currently I think the sort works, however I still can't move the individual products. Only prices are sorted and changed ....
source to share
I looked at your site and entered the sorting function you used in your question. I noticed a few things. First, the strings you pass into your comparison function look like this:
"£38.89 ex. VAT"
"£19.93 ex. VAT"
"£44.44 ex. VAT"
...
So, it parseInt("£38.89 ex. VAT")
will return NaN
. No comparison. We can tweak this to remove all non-discrete information and also analyze the float, for example:
parseFloat("£38.89 ex. VAT".replace(/[^0-9\.]/g, "")); // --> 38.89
However, this will sort the above price strings, but we don't have any information on combining products to sort correctly in the DOM (yet). To do this, we need to customize what you put in your array.
The strategy is to find all top level containers with $('.ProductListProductItem')
and push their html into an array. Sort the array so that prices are found $('#ProductPrice span[id*="ABSPrice"]')
and are devoid of non-decimal information. Each top element container is then refilled with html from the sorted array.
Main code:
var liContents = [];
// Push in all the product containers' innerHTML
$('.ProductListProductItem').each(function () {
liContents.push($(this).html());
});
// Use our new sorting routine
liContents.sort(numOrdDesc);
// Replace the html of each top item container
$('.ProductListProductItem').each(function () {
$(this).html(liContents.pop());
});
// Pass in jQuery elements, not strings
function numOrdDesc($a, $b) {
// Get the price further down in the DOM
var a = $('#ProductPrice span[id*="ABSPrice"]', $a).text();
var b = $('#ProductPrice span[id*="ABSPrice"]', $b).text();
return parseFloat(b.replace(/[^0-9\.]/g, "")) - parseFloat(a.replace(/[^0-9\.]/g, ""));
}
To verify this, go to the live site and open DevTool> Console. Copy the above script and paste it into the Console. Click "Return" and notice that the products are now sorted in ascending order. Enjoy.
Before:
After:
source to share
Yours parseInt
is failing for the pound sign. I am assuming that you want to strip this in your sort function and also use parseFloat
since your prices are floating point numbers.
Try
function numOrdDesc(a, b) {
return parseFloat(b.replace(/[^0-9\.]/g, "")) - parseFloat(a.replace(/[^0-9\.]/g, ""))
}
replace
pretty much removes anything that is not a digit or period from the string before trying to parse it.
// "£298.73".replace(/[^0-9\.]/g, "") -> "298.73"
// parseFloat("298.73") -> 298.73
source to share