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

Question

如何从数据属性中找出最大值或最小值，并在找到的最大值或最小值的div后加一个class？

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("yellow");

我发现这个 Whosebug 问题确实有助于找到最大值或最小值，但是如何将 class 应用于此值来自的 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>

Answer 2

function minMaxId(selector) {
  var min = null,
    max = null;
  $(selector).each(function() {
    var id = parseInt($(this).data('foo'), 10);
    if ((min === null) || (id < min)) {
      min = id;
    }
    if ((max === null) || (id > max)) {
      max = id;
    }
  });
  return {
    min: min,
    max: max
  };
}

// Returns Obj with min and max
minMaxId('div'); // => {min:1, max:5}

// Set a span with the values
$('#tmpMin').html(minMaxId('div').min)
$('#tmpMax').html(minMaxId('div').max)

// Change the highest one to have the class yellow
$('[data-foo=' + minMaxId('div').max + ']').addClass('yellow')

// Change the lowest one to have the class grey
$('[data-foo=' + minMaxId('div').min + ']').addClass('grey')

.yellow {
  background: yellow;
  }

.grey {
  background: grey;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-foo="12">Div 1</div>
<div data-foo="43">Div 2</div>
<div data-foo="3">Div 3</div>
<div data-foo="44">Div 4</div>
<div data-foo="153">Div 5</div>

Min: <span id="tmpMin"></span> || Max: <span id="tmpMax"></span>

Answer 3

首先，我认为您希望关闭 DIV 标签。接下来，您可以使用元素的索引来突出它 eg.

$('div').eq(divIndex).addClass('yellow');

要获取 divIndex，您只需遍历列表并执行 min/max 搜索，如下所示：

loop {
  if(curValue > value){
    value = curValue;
  }
}

在 jsFiddle 上查看完整内容：http://jsfiddle.net/pavkr/f2t1a5e2/

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

How to addClass to div with largest data-attribute value?

javascript

jquery