数値に基づいてデータ属性で検索し、最も近い値を得る方法

Question

私は異なるdata-score値を持つdivのリストを並べ替えていません。 data-scoreで検索された値のすぐ上の最初のdivにアクセスしようとしています。私は次のコードを持っていますが、うまくいかないようです。助言がありますか？

var userscore = $("#userScore").val(); 
 

 
var next = $("div[data-score >=" + userscore + "]").text(); 
 

 
$("#result").text(next);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="hidden" id="userScore" value="20"> 
 
<div data-score="5" class="item">A</div> 
 
<div data-score="15" class="item">B</div> 
 
<div data-score="45" class="item">E</div> 
 
<div data-score="25" class="item">C</div> 
 
<div data-score="35" class="item">D</div> 
 

 

 
<div id="result">NEXT IS UNKNOWN!</div>

Answer 1

使用.filter()ハンドラに指定さconditionごとに要素のセットを削減します。

.filterが返す要素の上に.sort()を適用し、.first()要素を取り除きます。

var userscore = $("#userScore").val(); 
 
var next = $("div[data-score]").filter(function() { 
 
    return $(this).data('score') >= userscore; 
 
}).sort(function(a, b) { 
 
    return Number($(a).data('score')) - Number($(b).data('score')); 
 
}).first(); 
 

 
$("#result").text(next.text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="hidden" id="userScore" value="20"> 
 
<div data-score="5" class="item">A</div> 
 
<div data-score="15" class="item">B</div> 
 
<div data-score="45" class="item">E</div> 
 
<div data-score="25" class="item">C</div> 
 
<div data-score="35" class="item">D</div> 
 
<hr> 
 
<div id="result">NEXT IS UNKNOWN!</div>