[英]Get the highest values of a data attribute
My html looks like 我的html看起来像
<div id="container"> <div class="right" data-x="1" data-y="1" ></div> <div class="right" data-x="2" data-y="1" ></div> <div class="right" data-x="3" data-y="1" ></div> <div class="right" data-x="4" data-y="1" ></div> </div>
How to get max/min value of data-x/data-y using jquery? 如何使用jQuery获取data-x / data-y的最大值/最小值?
try this 尝试这个
var containerChilds = document.getElementById("container").children;
var max = 0;
for ( var counter =0; counter < containerChilds.length; counter++)
{
var value = containerChilds[counter].getAttribute("data-x");
if ( max < value )
{
max = value;
}
}
console.log(max);
In jQuery 在jQuery中
var max = 0;
$("#container div.right[data-x]").each(function(){
var value = $(this).attr("data-x");
max = max < value ? value : max;
});
console.log(max);
Generate array of values of data-x
and data-y
values using map()
and get()
. 使用map()
和get()
生成data-x
和data-y
值的数组。 Then use Math.min
and Math.max
with apply()
to get maximum and minimum value from array. 然后将Math.min
和Math.max
与apply()
一起使用,以从数组中获取最大值和最小值。
// generate array of `data-x` attribute var arr1 = $('[data-x]').map(function() { return $(this).data('x'); }).get(); // generate array of `data-y` attribute var arr2 = $('[data-y]').map(function() { return $(this).data('y'); }).get(); console.log( Math.min.apply(Math, arr1), Math.min.apply(Math, arr2), Math.max.apply(Math, arr1), Math.max.apply(Math, arr2) )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"> <div class="right" data-x="1" data-y="1"></div> <div class="right" data-x="2" data-y="1"></div> <div class="right" data-x="3" data-y="1"></div> <div class="right" data-x="4" data-y="1"></div> </div>
You can apply same thing for data-y
您可以对data-y
应用相同的内容
var arrDataX=new Array(); var arrDataY=new Array(); $('div.right').each(function(index){ arrDataX.push($(this).attr("data-x")); arrDataY.push($(this).attr("data-y")); }); var minValue=arrDataX.sort()[0]; var maxValue=arrDataX.sort()[arrDataX.length-1]; alert("Min - "+minValue+", Max - "+maxValue);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="right" data-x="1" data-y="1" ></div> <div class="right" data-x="2" data-y="1" ></div> <div class="right" data-x="3" data-y="1" ></div> <div class="right" data-x="4" data-y="1" ></div> </div>
try this 尝试这个
var all = $("#container").find(".right");
var max_x =0;
var max_y =0;
var min_x =1;
var min_y =1;
$.each(all,function(k,v){
if(max_x<$(v).attr("data-x"))
max_x = $(v).attr("data-x");
if(min_x>$(v).attr("data-x"))
min_x = $(v).attr("data-x");
if(max_y<$(v).attr("data-y"))
max_y = $(v).attr("data-y");
if(min_y>$(v).attr("data-y"))
min_y = $(v).attr("data-y");
})
alert("max_x:"+max_x+" max_y:"+max_y+" min_x:"+min_x+" min_y:"+min_y);
https://jsfiddle.net/sum1/L94ugfyp/ https://jsfiddle.net/sum1/L94ugfyp/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.