Get highest number from table cell content

Question

I'm trying to get the highest number (8 in example below) from the table cells with specific class. I'm assuming I'll have to convert it to an array and then do math.max on it?

This is my HTML code:

<table>
    <tr>
        <td class="id">3</td>
    </tr>
    <tr>
        <td class="id">8</td>
    </tr>
    <tr>
        <td class="id">4</td>
    </tr>
</table>

This is really what I've tried, but it just returns 384. So math.max doesn't work on it.

var varID = $('.id').text();
var varArray= jQuery.makeArray(varID);
alert (varArray);

Answer 1

I think the best way would be:

var max = 0;
$('.id').each(function()
{
   $this = parseInt( $(this).text() );
   if ($this > max) max = $this;
});
alert(max);

jsfiddle example

Answer 2

Try this:

var high = Math.max.apply(Math, $('.id').map(function(){
         return $(this).text()
}))

http://jsfiddle.net/9mQwT/

Answer 3

Check this FIDDLE

$(function() {

   // Get all the elements with class id
   var $td = $('table .id');
   var max = 0;
    $.each($td , function(){
        if( parseInt($(this).text()) > max){
           max = parseInt($(this).text())
        }
    });
            console.log('Max number is : ' + max)

});​

You can use parseInt or parseFloat to convert it to a number otherwise , it will compare them like strings with their ascii values..