หาค่ามากที่สุด Max ด้วย JavaScript + jQuery - สอน JavaScript

สำหรับบทความนี้จะมาสาธิตการใช้ JavaScript กับ jQuery ในการหาค่าที่มากที่สุด หรือ Max Value ของ Input ที่กำหนดไว้ด้วยแอตทริบิวต์ Class ซึ่งจะใช้วิธีที่แตกต่างกันถึง 3 วิธี

1. วนลูปด้วย each ของ jQuery และเปรียบเทียบค่ามากที่สุด
2. วนลูปด้วย each ของ jQuery แล้วเก็บเป็นอาร์เรย์ แล้วใช้ฟังก์ชั่นทางคณิตศาสตร์ Math เพื่อเลือกค่าที่สุดจากอาร์เรย์
3. ใช้ฟังก์ชั่น map ของ jQuery ดัง value ของ textbox ทุกตัวที่กำหนดไว้ด้วย class เดียวกันออกมาเป็นอาร์เรย์แล้วใช้ฟังก์ชั่นทางคณิตศาสตร์ Math เพื่อเลือกค่าที่สุดจากอาร์เรย์

--------------------------------------------------------------
ตัวอย่างหน้าแสดงผล 
--------------------------------------------------------------

ฟังก์ชั่นสำหรับหาค่าสูงสุดด้วย JavaScript

ddวิธีที่ 1: var maxValue = 0; $('.score').each(function(indexInArray) { var val = $(this).val(); val = parseInt(val);//parseFloat(); if (maxValue === 0 || maxValue < val) { maxValue = val; } }); return maxValue; วิธีที่ 2: var _array = []; $('.score').each(function(indexInArray) { _array.push(parseInt($(this).val())); }); return Math.max.apply(Math,_array); วิธีที่ 3: var _array = $( ".score" ).map(function() { return parseInt($( this ).val()); }); return Math.max.apply(Math,_array);

--------------------------------------------------------------
ซอร์สโค๊ด JavaScript + Html ทั้งหมด 
--------------------------------------------------------------

 <script>
function findMaxValue() {
    var maxValue = 0;
    $('.score').each(function(indexInArray) {
        var val = $(this).val();
        val = parseInt(val);//parseFloat();
        if (maxValue === 0 || maxValue < val) {
            maxValue = val;
        }
    });
    return maxValue;
}

function findMaxValue2() {
    var _array = [];
    $('.score').each(function(indexInArray) {
        _array.push(parseInt($(this).val()));
    });
    return Math.max.apply(Math,_array);
}

function findMaxValue3() {
    var _array = $( ".score" ).map(function() {
                    return parseInt($( this ).val());
                  });
    return Math.max.apply(Math,_array);
}

</script>

<table width="100%">
<tr>
<td width="30%" valign="top">
ฟังก์ชั่นสำหรับหาค่าสูงสุดด้วย JavaScript
<div id="center">
    <input class="score" value="10" name="test" type="text"><br>
    <input class="score" value="32" type="text"><br>
    <input class="score" value="20" type="text"><br>
    <input class="score" value="40" type="text"><br>
    <input class="score" value="49" type="text"><br>
    <input class="score" value="8" type="text"><br>
    <input class="score" value="10" type="text"><br>
</div>
<h4 id="result"></h4>
<h4 id="result2"></h4>
<h4 id="result3"></h4>

<input type="button" onclick="process()" value="วิธีที่ 1"/>
<input type="button" onclick="process2()" value="วิธีที่ 2"/>
<input type="button" onclick="process3()" value="วิธีที่ 3"/>

</td>
<td valign="top">
<div id="process1" style="display:none">
วิธีที่ 1:
<textarea style="width:100%;height:160px">
    var maxValue = 0;
    $('.score').each(function(indexInArray) {
        var val = $(this).val();
        val = parseInt(val);//parseFloat();
        if (maxValue === 0 || maxValue < val) {
            maxValue = val;
        }
    });
    return maxValue;
</textarea>
</div>
<div id="process2" style="display:none">
วิธีที่ 2:
<textarea style="width:100%;height:117px">
    var _array = [];
    $('.score').each(function(indexInArray) {
        _array.push(parseInt($(this).val()));
    });
    return Math.max.apply(Math,_array);
</textarea>
</div>
<div id="process3" style="display:none">
วิธีที่ 3:
<textarea style="width:100%;height:108px">
    var _array = $( ".score" ).map(function() {
                    return parseInt($( this ).val());
                  });
    return Math.max.apply(Math,_array);
</textarea>
</div>
</td>
</tr>
</table>


<script>

function process(){
    $('#result').html("1) ค่าสูงสุด คือ : " + findMaxValue());
    $('#process1').show();
}


function process2(){
    $('#result2').html("2) ค่าสูงสุด คือ : " + findMaxValue2());
    $('#process2').show();
}

function process3(){
    $('#result3').html("3) ค่าสูงสุด คือ : " + findMaxValue3());
    $('#process3').show();
}


</script>

อ้างอิง

• http://api.jquery.com/map/
• http://stackoverflow.com/questions/11985341/get-max-and-min-value-from-array-in-javascript
• http://www.w3schools.com/jsref/jsref_push.asp