Найти наибольший численный атрибут

Question

Как выбрать все div внутри другого div и найти наибольший атрибут id?

Рассмотрим следующий код:

<div class="posts"> 
    <div class="post" data-id="5"></div> 
    <div class="post" data-id="3"></div> 
    <div class="post" data-id="1"></div> 
    <div class="post" data-id="4"></div> 
</div>  

То, что я хочу сделать, это, найти div, который, имеющий самый большой id attribute

Я использую следующий код, чтобы захватить id attribute:

$('.posts .post').data('id'); 

Но это возвращает последние один, а не наибольшее.

Answer 1

var max = 0; 
$('.post').attr("data-id", function(i,v){ 
    max = +v > max ? +v : max; 
}); 

console.log(max); // 5 

---

Другой способ:

var ids = $('.post').map(function(){ 
    return +this.dataset.id;   // or use jQ: return +$(this).data('id'); 
}); 

console.log(Math.max.apply(Math, ids)); // 5 

^{http://api.jquery.com/jquery.map/ используется для возврата новый массив искомых значений.
How might I find the largest number contained in a JavaScript array? используется для отдыха.}

Унарный + используется для преобразования любого возможного Строкового номера в Number.
Чтобы предотвратить NaN в результате несоответствия, вызванное ошибочно вставленный символ Альфа вы можете использовать:

return +this.dataset.id || 0; // Prevent NaN and turn "a" to 0 

Answer 2

На мой взгляд, более чистый, чем отслеживать стоимость и делать сравнения по своему усмотрению. Просто нажмите значения в массив и используйте Math для определения макс.

var max = Math.max.apply(Math, $(".posts .post").map(function() { 
    return $(this).data("id"); 
})); 

http://jsfiddle.net/d0wuxygs/

Для справки: Get max and min value from array in JavaScript

Answer 3

Если вы хотите underscore, это может быть сделано следующим образом с помощью функции max.

var getIdAttr = function(el){ return el.getAttribute('data-id'); }; 
 
var elementIds = _.map($('.post'), getIdAttr); 
 
var maxId = _.max(elementIds); 
 

 
console.log(maxId); // 5

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> 
 
<div class="posts"> 
 
    <div class="post" data-id="3"></div> 
 
    <div class="post" data-id="5"></div> 
 
    <div class="post" data-id="1"></div> 
 
    <div class="post" data-id="4"></div> 
 
</div>