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

Question

I have the following divs:

<div id="2" class="maindiv">test</div>
<div id="5" class="maindiv">test</div>
<div id="3" class="maindiv">test</div>
<div id="1" class="maindiv">test</div> 
<div class="maindiv">test</div>     
<div id="4" class="maindiv">test</div>    

How to get the highest id (5) and the lowest id (1) in jQuery or Javascript?

Solution 1

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

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

http://jsfiddle.net/qQvVQ/

Solution 2

To achieve this you can create an array containing all the id values, then use Math to get the highest/lowest:

var ids = $('.maindiv[id]').map((i, el) => parseInt(el.id, 10)).get();
var lowest = Math.min.apply(Math, ids); // = 1
var highest = Math.max.apply(Math, ids); // = 5

console.log(`${lowest} => ${highest}`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="2" class="maindiv">test</div>
<div id="5" class="maindiv">test</div>
<div id="3" class="maindiv">test</div>
<div id="1" class="maindiv">test</div>
<div class="maindiv">test</div>
<div id="4" class="maindiv">test</div>

Note the [id] attribute selector is required, otherwise 0 is assumed for the missing value.

If you need IE support, you need to use an anonymous function instead of the arrow function:

var ids = $(".maindiv[id]").map(function() {
  return parseInt(this.id, 10);
}).get();

Solution 3

var min = Number.MAX_VALUE, max = Number.MIN_VALUE;
$(".maindiv").each(function () {
    var id = parseInt(this.id, 10);
    if (id > max) {
        max = id;
    }
    if (id < min) {
        min = id;
    }
});

Solution 4

You can use the sort function to do it.

function arrayify(obj){
    return [].slice.call(null,obj);
}
var all = arrayify(document.querySelectorAll('div[id]'));
var max = all.sort().pop();
var min = all.sort().reverse().pop();

This is way easier that using jQuery

Solution 5

var valArray = [];
$('.maindiv').each(function(){
    valArray.push(parseInt($(this).attr('id'), 10));
})
valArray.sort(function(a, b) { return a - b })

valArrayp[0] // lowest
valArrayp[valArrayp.length - 1] // highest`

Have not tested, should work though

View more solutions

Comments

[lonesomeday]

12 seconds slower than me, but with an example, so +1!

[Rubens Mariuzzo]

That's what I call a deep understanding of both JavaScript and jQuery.

[maerics]

It is a fine solution but some might gripe about the use of globals and the unnecessary two passes through the list when min/max can be determined in one pass.

[Michael Samuel]

Most if not all answers are perfect but i'm choosing for being most forward...thanks :)

[James Donnelly]

Well id can be used, but data is more appropriate. As you mentioned in your question these are values. Ids are intended to be used as identifiers and not as values.

[Licson]

@MichaelSamuel because an ID is not supposed to store data but data-* attributes are. So, using the data attribute is a better choice.

[Michael Samuel]

Now there is a problem...if an id is not a number this will return "NaN"

[Rory McCrossan]

@MichaelSamuel that's a simple solution, use parseInt or parseFloat around this.id, or simply check for isNaN to disregard the value.

[Michael Samuel]

can you edit the example or illustrate more as I can't understand what you mean...thanks :)

[Rory McCrossan]

@MichaelSamuel I've updated to use parseInt so that values will be converted to numeric. If this still doesn't fix your issues you would be best to start a new question

[Bonttimo]

@JamesDonnelly How would you implement the usage of data-* to Rory McCrossan answer?

[Rodrigo Zuluaga]

Excelent answer!!