如何根据数值通过数据属性进行搜索并获得最接近的值

How to search via data attribute based on a numeric value and get the closest value

本文关键字：搜索 最接近 数据属性 何根      更新时间：2023-09-26

我有一个具有不同data-score值的div的无序列表。我试图访问的第一个div的data-score刚好高于搜索值的值。我有以下代码，但它似乎不起作用。有什么建议吗？

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>

使用.filter()根据处理程序中指定的condition减少元素集。

将.sort()应用于.filter返回的元素，并从中获取.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>

相关文章：