Find the 2nd and 3rd places with the most jQuery numbers
I'm busy creating a podium type screen that will determine which person has the highest score and then place them in their relative positions.
Example: given this table:
+-------+-------+
| name | score |
+-------+-------+
| Mike | 3 |
| Kevin | 14 |
| John | 6 |
+-------+-------+
Kevin would have been the winner when John was second and Mike was third.
How can I do this using JQuery? I managed to trawl the internet and find out who has the highest score and then get his / her name. But I'm now stuck in figuring out who is second and who is third.
This is what I have so far:
$( document ).ready(function() {
var max = 0;
var name;
$('#HoldingPodiumData, .score').each(function()
{
$this = parseFloat( $(this).html() );
if ($this > max)
{
max = $this;
//name = $('.names').html();
name = $(this).closest('td').prev('td').html()
}
});
alert(max);
alert(name);
$("#winner").html(name);
});
Can anyone help me in the right direction please? I created a FIDDLE of what I have achieved so far
Thank! Mike
source to share
This is what I would do in your case:
var max = 0;
var names = [];
$('#HoldingPodiumData tr:gt(0)').each(function()
{
if ($(this).find(".score").length > 0)
{
names.push({
score: parseFloat($(this).find(".score").html()),
name: $(this).find(".names").html()
});
}
});
names = names.sort(function(a, b)
{
return b.score - a.score;
});
$("#winner").html(names[0].name);
$("#second").html(names[1].name);
$("#third").html(names[2].name);
Fiddle . Explanation:
- First of all, I changed the selector to get everything
tr
, skipping the first one; - Then, inside the loop, I believe if
tr
has a child.score
; - If so, I add it to the results array called
names
; - Then I sort this array in desc order.
This is not the best way I guess, but it doesn't change your code that much. The trick is here sort()
, you have to look at it.
source to share
You need to change the partition you set max
to the new first location. Instead, keep an array of length 3 and slide everyone down when you find someone better than the current first spot.
You can maintain scores along with names by storing an additional array of names.
if ($this > scores[0])
{
scores[2] = scores[1];
scores[1] = scores[0];
scores[0] = $this;
names[2] = names[1];
names[1] = names[0];
names[0] = $(this).closest('td').prev('td').html();
}
Once the code is complete, your first place winner will be held in scores[0]
, second place will be at scores[1]
, and third place will be at scores[2]
.
As an alternative to keeping two separate arrays, you can define an object with names and evaluation properties.
source to share
var scoresSorted = $('.score').map(function () { return +$(this).text(); }).get().sort(function(a, b){return b-a});
$('#winner').text( $('td:contains('+scoresSorted[0]+')').prev().text() )
$('#second').text( scoresSorted[1] )
$('#third').text( scoresSorted[2] )
The first line collects the values, puts them in an array, and sorts them. The second line uses the first value in the array (the highest) to find a matching name. The last two lines get the second and third place values from the array (indices 1 and 2).
source to share