Question

我正在尝试选择具有最高价值的td并将其标记为勾号。

例如我有

<td class="info">55</td>
<td class="info">66</td>
<td class="info">44</td>

现在，当我尝试从tds获取值时，它只显示第一个

 $(document).ready(function(e)
 {
    var value = $(".info").text();
    alert(value);
 });

有人能告诉我如何开始吗？如何获取数据并进行处理？

Answer 1

var max = 0,
  el, val;
$(".info").each(function() {
  val = parseInt($(this).text());
  if (val > max) {
    max = val;
    el = $(this);
  }
});

console.log(el);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="info">55</td>
      <td class="info">66</td>
      <td class="info">44</td>
    </tr>
    <tbody>
</table>

在比较之前，您必须将文本转换为整数值。

function compare() {
  var max=0,el,val;
  $(".info").each(function(){
     val = parseInt($(this).text());
     if(val>max) {
       max = val;
       el = $(this);
     }
  });
  return el;
}

Answer 2

text方法始终返回第一个匹配元素的文本内容，忽略所有其他元素。

要查看所有这些内容，请使用map，为每个元素返回文本值，转换为数字（使用+）。然后将生成的jQuery集合转换为带有get()的普通数组。然后很容易得到最大值，它的位置，并用jQuery eq()来定位它：

$(document).ready(function() {
  var values = $(".info").map(function () {
    return +$(this).text(); // convert to number
  }).get(); // convert to array
  // Get the maximum value
  var max = Math.max.apply(Math, values);
  // Get position of where the maximum value is
  var index = values.indexOf(max);
  // Apply marking
  $(".info").eq(index).addClass('tick');
});

.tick { background: yellow }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="info">55</td>
    <td class="info">66</td>
    <td class="info">44</td>
  </tr>
</table>

如果您需要突出显示最大值的多行，请创建一个接受选择器的函数：

function highlightGreatest(selector) {
  var values = $(selector).map(function () {
    return +$(this).text(); // convert to number
  }).get(); // convert to array
  // Get the maximum value
  var max = Math.max.apply(Math, values);
  // Get position of where the maximum value is
  var index = values.indexOf(max);
  // Apply marking
  $(selector).eq(index).addClass('tick');
}

$(document).ready(function() {
    highlightGreatest('.info');
    highlightGreatest('.info2');
});

.tick { background: yellow }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="info">55</td>
    <td class="info">66</td>
    <td class="info">44</td>
  </tr>
  <tr>
    <td class="info2">55</td>
    <td class="info2">66</td>
    <td class="info2">144</td>
  </tr>
</table>

比较并选择jquery中具有最高值的行

2 个答案: