find minimum and maximum value in attribute using jquery

Question

I need to find minimum and maximum value in data attribute but it returns 0

here is my code

<div data-price="2" class="maindiv">test</div>
<div data-price="5" class="maindiv">test</div>
<div data-price="3" class="maindiv">test</div>
<div data-price="0" class="maindiv">test</div> 
<div data-price="25" class="maindiv">test</div>     
<div data-price="10" class="maindiv">test</div> 

<script>
    var ids = $("div[data-price]").map(function() {
        return this.id;
    }).get();

    var highest = Math.max.apply( Math, ids );
    var lowest = Math.min.apply( Math, ids );

    alert(highest);
    alert(lowest);
</script>

Did these answers provide solution to your problem?

Anoop Joshi P
– Anoop Joshi P

2016-06-13 10:57:51 +00:00
Commented Jun 13, 2016 at 10:57 — Anoop Joshi P
– Anoop Joshi P, Commented Jun 13, 2016 at 10:57

gurvinder372 · Accepted Answer · 2016-06-13 10:30:41Z

7

You need to return data-price attribute, not its id

var ids = $("div[data-price]").map(function() {
    return $(this).attr("data-price");
}).get();

var highest = Math.max.apply( Math, ids );
var lowest = Math.min.apply( Math, ids );

alert(highest);
alert(lowest);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-price="2" class="maindiv">test</div>
<div data-price="5" class="maindiv">test</div>
<div data-price="3" class="maindiv">test</div>
<div data-price="0" class="maindiv">test</div> 
<div data-price="25"class="maindiv">test</div>     
<div data-price="10" class="maindiv">test</div>

answered Jun 13, 2016 at 10:30

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Emil S. Jørgensen · Accepted Answer · 2016-06-13 10:57:41Z

You can do this with regular JavaScript:

//Variable to hold our results
var data = [];
//Loop through HTML nodes
for (var i = 0; i < document.querySelectorAll(".maindiv").length; i++) {
	data.push({
		node : document.querySelectorAll(".maindiv")[i],
		value : parseInt(document.querySelectorAll(".maindiv")[i].getAttribute("data-price"))
	});
}
//Sort lowest to highest (Only use one sort! Pick either this or the next one as they overwrite each Other)
data = data.sort(function (a, b) {
		return a.value - b.value;
	});
//Sort highest to lowest (Only use one sort! Pick either this or the last one as they overwrite each Other)
data = data.sort(function (a, b) {
		return b.value - a.value;
	});
//List all
console.log(data);
//List first (highest or lowest depending or sort)
console.log('first', data[0].value);
//List last (highest or lowest depending or sort)
console.log('last', data[data.length-1].value);

<div data-price="2" class="maindiv">test</div>
<div data-price="5" class="maindiv">test</div>
<div data-price="3" class="maindiv">test</div>
<div data-price="0" class="maindiv">test</div> 
<div data-price="25" class="maindiv">test</div>     
<div data-price="10" class="maindiv">test</div>

Anoop Joshi P · Accepted Answer · 2016-06-13 10:29:45Z

0

Currently you are returning the id attribute from the map function. Change it to to data-price

var ids = $("div[data-price]").map(function() {
  return $(this).data("price");
}).get();
var highest = Math.max.apply( Math, ids );
var lowest = Math.min.apply( Math, ids );
alert(highest)
alert(lowest)

Fiddle

answered Jun 13, 2016 at 10:29

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Collectives™ on Stack Overflow

find minimum and maximum value in attribute using jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related