Question

td中的值是从PHP生成的，现在需要比较这些值并使用jquery动态地基于值设置等级，例如（'1,2,3 ...'）。例如，我在以下代码段中为最高值设置了静态排名1。但我无法弄清楚-如何动态循环并通过jquery设置排名

$(document).ready(function(){
  var high = Math.max.apply(Math, $('.rank').map(function(){
    return $(this).text()
  }))
  $('.rank').each(function(){
    var mark = $(this).text();
    if(mark == high){ 
      $(this).find('span#rank').text(' (1)');
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Student</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>John</td>
        <td class='rank'>20<span id='rank'></span></td>
      </tr>
      <tr>
        <td>Jack</td>
        <td class='rank'>40<span id='rank'></span></td>
      </tr>
      <!-- Multiple Tr are here, generated from php -->
     </table>
  </body>
</html>

Answer 1

首先id在文档中必须唯一。要获得排名：

获取所有等级并将其存储在数组中
按升序排列此数组
在.rank上重复，并获取前一个数组中当前排名的索引
这是您的绝对排名。

let allRanks = [];
$('.rank').each(function(){
    allRanks.push( +$(this).text() );
})
allRanks.sort();

$(".rank").each(function(){
  let rankVal = +$(this).text();
  let rank = allRanks.indexOf(rankVal)+1;
  $(this).find(".innerrank").html(" ("+rank+")")
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Student</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>John</td>
        <td class='rank'>20<span class='innerrank'></span></td>
      </tr>
      <tr>
        <td>Jack</td>
        <td class='rank'>40<span class='innerrank'></span></td>
      </tr>
      <tr>
        <td>Jack</td>
        <td class='rank'>30<span class='innerrank'></span></td>
      </tr>
      <!-- Multiple Tr are here, generated from php -->
     </table>
  </body>
</html>

PS：当多个等级值相同时，您可能需要处理这种情况。

Answer 2

您可以创建一个数组，数组中的数字以div格为单位，然后对其进行排序和迭代。进行迭代时，找到包含数字的等级div，并将等级作为索引+ 1。

请参见下面的代码

$(document).ready(function(){
  var arr = new Array();
  $('.rank').each(function(){
    arr.push($(this).text());
  });
  arr.sort();
  $.each(arr, function( index, value ) {
    $('.rank:contains(' + value + ')').find('span.rankNumber').html(index+1);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Student</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>John</td>
        <td class='rank'>20<span class='rankNumber'></span></td>
      </tr>
      <tr>
        <td>Jack</td>
        <td class='rank'>40<span class='rankNumber'></span></td>
      </tr>
      <!-- Multiple Tr are here, generated from php -->
     </table>
  </body>
</html>

比较td值并动态设置排名

2 个答案: