My HTML looks like:

<ul>
  <li data-target="12">1</li>
  <li data-target="4">2</li>
  <li data-target="9">3</li>
  <li data-target="15">4</li>
  <li data-target="23">5</li>
  <li data-target="32">6</li>
  <li data-target="7">7</li>
  <li data-target="10">8</li>
  <li data-target="5">9</li>
  <li data-target="2">10</li>
</ul>

What method should I use to get the maximum value from the data-target attributes? Do vanilla JavaScript or jQuery have some native functions for this or I should just use for loop to iterate through all the items and get the maximum value, shouldn't I?

My HTML looks like:

<ul>
  <li data-target="12">1</li>
  <li data-target="4">2</li>
  <li data-target="9">3</li>
  <li data-target="15">4</li>
  <li data-target="23">5</li>
  <li data-target="32">6</li>
  <li data-target="7">7</li>
  <li data-target="10">8</li>
  <li data-target="5">9</li>
  <li data-target="2">10</li>
</ul>

What method should I use to get the maximum value from the data-target attributes? Do vanilla JavaScript or jQuery have some native functions for this or I should just use for loop to iterate through all the items and get the maximum value, shouldn't I?

• javascript
• jquery

• Have you tried to do this at least with for? – Regent Commented Apr 24, 2015 at 11:48

9 Answers 9

One way (without bothering with an array);

var max = 0;
$("li[data-target]").each(function() {
    max = Math.max(max, parseInt($(this).data("target"), 10));
});

alert(max);

use Math.max.apply() method to get max value from a numeric array.

var arr = $('li[data-target]').map(function(){
    return $(this).data('target')
});
console.log(Math.max.apply(Math,arr));

Fiddle Demo

Try this: use .map() along with Math function:

var targets = $("li").map(function() {
    return $(this).data("target");
}).get();
var max = Math.max.apply(Math,targets);

Demo

This should work...

var array = []; 
$('li').each(function() {
    array.push($(this).data('target'));
});
var maxNumber = Math.max.apply(Math, array);

alert(maxNumber);

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li data-target="12">1</li>
<li data-target="4">2</li>
<li data-target="9">3</li>
<li data-target="15">4</li>
<li data-target="23">5</li>
<li data-target="32">6</li>
<li data-target="7">7</li>
<li data-target="10">8</li>
<li data-target="5">9</li>
<li data-target="2">10</li>

var maxVal = 0;
$('[data-target]').each(
    function(){
        if($(this).attr('data-target') > maxVal){
            maxVal = $(this).attr('data-target');
        }
    });

fiddle

Try with this:

var maxValue = 0;

$("li").each(function(index,val){
  var value = $(this).attr('data-target');   
    if(value > maxValue) maxValue= value;
}); 

Yes you can get max value using for each loop of jquery. For each value of li get its attribute data-target. e.g

  var maxVal=0;
 $(this).find('li').each(function(){
            // cache jquery var
            var current = $(this);
            var val=parseInt(current.attr( "data-target" ));
            if(val > maxVal){
               maxVal=val;
            }       
        });
        console.log(maxVal);//Its the max value

Turak Vladyslav

below code will work you can check it once

var Lis = $('#test').find('li');
var dataArray = []
for(var i=0;i<Lis.length;i++){
 dataArray.push($(Lis[i]).attr('data-target'))
  
}
var maxDatatTarget = Math.max.apply(null, dataArray)
alert("max data target value"+maxDatatTarget)

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="test">
<li data-target="12">1</li>
<li data-target="4">2</li>
<li data-target="9">3</li>
<li data-target="15">4</li>
<li data-target="23">5</li>
<li data-target="32">6</li>
<li data-target="7">7</li>
<li data-target="10">8</li>
<li data-target="5">9</li>
<li data-target="2">10</li>
</ul>

Try this if it works for you :

function calculateMaxTarget(){

  var attr[] = $('li').attr('data-target');
  var max = 0;
  for (var i=0; i < attr.length; i++) {
    if(attr[i]>max){
      max = attr[i];
    }
  };
  return max;
}