找到第二和第三高的数字Jquery

I am busy creating a podium type screen which will identify which person has the highest score and then place them into their relative positions.

我正在忙着创建一个讲台型屏幕,该屏幕将识别哪个人得分最高,然后将他们放入相对位置。

Example: Given this Table:

示例:给定此表:

+-------+-------+
| name  | score |
+-------+-------+
| Mike  |     3 |
| Kevin |    14 |
| John  |     6 |
+-------+-------+

Kevin would be the winner with John being second and Mike 3rd.

凯文将成为赢家,约翰排名第二,迈克排名第三。

How would I get to this conclusion using Jquery? I have managed to trawl the internet and find out who has the highest score and then get his / her name. But I am now stuck on finding out who is 2nd and who comes third.

我如何使用Jquery得出这个结论?我设法浏览互联网,找出谁得分最高,然后得到他/她的名字。但我现在仍然坚持要找出谁是第二名,谁是第三名。

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);

    });

Could anyone help me in the right direction please? I have created a FIDDLE of what I have achieved thus far

有人能帮我正确的方向吗?我创造了迄今为止我所取得的成就

Thanks! Mike

3 个解决方案

#1

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 have changed the selector to get all tr, skipping the first;

首先,我已经更改了选择器以获取所有tr,跳过第一个;

Then inside the loop I verirify if the tr has a .score child element;

然后在循环中我验证tr是否有.score子元素;

If yes, I add it to the array of results called names;

如果是,我将它添加到名为的结果数组中;

Then I sort that array in desc order.

然后我按顺序排序该数组。

This is not the best way, I think, but it doesn't changes so much your code. The trick here is the sort() function, you should look at it.

我认为这不是最好的方法,但它不会改变你的代码。这里的技巧是sort()函数,你应该看看它。

#2

You need to change the section where you set max to the new first place. Instead, keep an array of length 3 and shift everyone down when you find someone better than the current first place.

您需要将设置max的部分更改为新的第一个位置。相反,保持一个长度为3的数组,当你找到比当前第一名更好的人时,让所有人都失望。

You can maintain the scores along side the names by keeping an additional array of the 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 has completed, your first place winner will be held in scores[0], second place will be in scores[1], and third will be in scores[2].

代码完成后,您的第一名获胜者将获得分数[0],第二名将获得分数[1],第三名将获得分数[2]。

As an alternative to keeping two separate arrays, you could define an object with name and score properties.

作为保留两个单独数组的替代方法,您可以定义具有名称和分数属性的对象。

#3

-1

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] )

jsFiddle example

The first line gathers the values, places them in an array, and sorts them. The second line uses the first value of the array (the highest) to find the matching name. The last two lines get the second and third place values from the array (index 1 and 2).

第一行收集值,将它们放在一个数组中,然后对它们进行排序。第二行使用数组的第一个值(最高)来查找匹配的名称。最后两行从数组中获取第二和第三位值(索引1和2)。

#1