的Jquery得到一個值，從其他範圍內獲得第二值，從其他範圍內獲得第三值等

Question

考慮以下代碼示例：

HTML

<div class="number_group"> 
    <span class="min">0</span> - 
    <span class="max">5</span>: 
    <span class="value">10</span> 
</div> 

<div class="number_group"> 
    <span class="min">6</span> - 
    <span class="max">10</span>: 
    <span class="value">16</span> 
</div> 

<div class="number_group"> 
    <span class="min">11</span> - 
    <span class="max">15</span>; 
    <span class="value">20</span> 
</div> 

<div class="number_group"> 
    <span class="min">16</span> - 
    <span class="max">20</span>; 
    <span class="value">22</span> 
</div> 

<label> 
    <input type="number" id="input_val" min="0" max="20" /> 
    <button id="check" type="button">Check</button> 
</label> 

我想才達到什麼jquery是在用戶輸入$（'input＃input_val'）並點擊$（'button＃check'）函數返回給定範圍內的值。

例如，如果用戶輸入數字3，函數將返回「10」;

例如，如果用戶輸入數字8，函數將返回「16」等

名單應和動態的，這我們不知道多少$（「div.number_group」）是給出。

Answer 1

對.number_group進行迭代，並根據最小值和最大值找出值。

$('#check').click(function() { 
 
    var res, 
 
    // get the entered value 
 
    num = +$('#input_val').val(); 
 
    // iterate over the divs 
 
    $('.number_group').each(function() { 
 
    // check the value within min and max 
 
    if (num >= +$('.min', this).text() && num <= +$('.max', this).text()) { 
 
     // if within range set the result as its value 
 
     res = +$('.value', this).text(); 
 
     // break the loop by returning false, since we are findout our value 
 
     return false; 
 
    } 
 
    }) 
 
    console.log(res); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="number_group"> 
 
    <span class="min">0</span> - 
 
    <span class="max">5</span>: 
 
    <span class="value">10</span> 
 
</div> 
 

 
<div class="number_group"> 
 
    <span class="min">6</span> - 
 
    <span class="max">10</span>: 
 
    <span class="value">16</span> 
 
</div> 
 

 
<div class="number_group"> 
 
    <span class="min">11</span> - 
 
    <span class="max">15</span>; 
 
    <span class="value">20</span> 
 
</div> 
 

 
<div class="number_group"> 
 
    <span class="min">16</span> - 
 
    <span class="max">20</span>; 
 
    <span class="value">22</span> 
 
</div> 
 

 
<label> 
 
    <input type="number" id="input_val" min="0" max="20" /> 
 
    <button id="check" type="button">Check</button> 
 
</label>

Answer 2

作爲替代接受的答案，你可以緩存最小值，最大值，並在數組值。這將避免每次點擊都必須搜索DOM。另一方面，div.numbergroups在頁面加載後必須是靜態的。

var minMaxArr = []; 

$(".number_group").each(function() { 
    var minMax = {}; 
    $this = $(this); 
    minMax['min'] = Number($this.children(".min").text()); 
    minMax['max'] = Number($this.children(".max").text()); 
    minMax['value'] = Number($this.children(".value").text()); 
    minMaxArr.push(minMax); 
}); 

$("#check").on('click', function() { 
    var inputVal = Number($("#input_val").val()); 
    var result = getValue(inputVal); 
    console.log(result); 
}) 

function getValue(inputVal) { 
    for (var cnt = 0; cnt < minMaxArr.length; cnt++) { 
     var minMax = minMaxArr[cnt]; 
     if (minMax.min <= inputVal && minMax.max >= inputVal) { 
      return minMax.value; 
     } 
    } 
    return undefined; 
}