найти минимальное и максимальное значение в атрибуте с помощью JQuery

Question

Мне нужно найти минимальное и максимальное значение в атрибут данных, но она возвращает 0

вот мой код

<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> 

Answer 1

Вы должны вернуть данных котировка атрибут, а не его ид

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>

Answer 2

В настоящее время вы возвращаете идентификатор атрибута из функция map. Измените его на 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

Answer 3

Вы можете сделать это с помощью регулярного JavaScript:

//Variable to hold our results 
 
var data = []; 
 
//Loop through HTML nodes 
 
for (var i = 0; i < document.querySelectorAll(".maindiv").length; i++) { 
 
\t data.push({ 
 
\t \t node : document.querySelectorAll(".maindiv")[i], 
 
\t \t value : parseInt(document.querySelectorAll(".maindiv")[i].getAttribute("data-price")) 
 
\t }); 
 
} 
 
//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) { 
 
\t \t return a.value - b.value; 
 
\t }); 
 
//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) { 
 
\t \t return b.value - a.value; 
 
\t }); 
 
//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>