javascript - 如何将Class添加到具有最大数据属性值的div？

Question

如何从数据属性中找出最大值或最小值，并将找到的值最大或最小的类添加到div中？

HTML 输出:

<div data-foo="12"></div>
<div data-foo="43"></div>
<div data-foo="3"></div>
<div data-foo="44"></div>
<div data-foo="153" class="yellow"></div>

.addClass("黄色");

我发现这个 stackoverflow 问题确实有助于找到最大值或最小值，但是如何将类应用到该值来自的 div？

Get the highest and lowest values of a certain attribute in jQuery or Javascript

Answer 1

试试这个:

脚本:

<script>
    $(document).ready(function(){
    var max = 0;
    $('div').attr("data-foo", function(i,val){
       max = +val > max ? +val : max;
    });
   $("div[data-foo='" + max + "']").addClass("yellow");// this is what you need to add class.do same process for min also if you required.
    console.log(max);
//for min 

var min = max;
    $('div').attr("data-foo", function(i,v){
       min = +v < min ? +v : min;
    });
    $("div[data-foo='" + min + "']").addClass("red");
}); 

HTML:

<div data-foo="12"></div>
<div data-foo="43"></div>
<div data-foo="3"></div>
<div data-foo="44"></div>
<div data-foo="153"></div>