javascript - 如何使用jquery获取大于给定值的元素的数据属性值？

Question

我有几个文本框和用于分期付款号码的数据属性。

<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>

如果我的分期付款数量是 15。我想要获得具有 data-instno>=15 的控件。在本例中这意味着最后 5 个文本框。

Answer 1

使用 jQuery Has Attribute Selector [name]选择目标元素并使用 .filter()过滤元素的 data-instno 大于 15。

$("[data-instno]").filter(function(){
  return $(this).attr("data-instno") >= 15;
}).doSomething();

$("[data-instno]").filter(function(){
  return $(this).attr("data-instno") >= 15;
}).css("background", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>

如果您想获取data-instno的值，请使用此

var arr = $("[data-instno]").map(function(){
  return $(this).attr("data-instno");
}).get().filter(function(value){
  return value >= 15;
});

var arr = $("[data-instno]").map(function(){
  return $(this).attr("data-instno");
}).get().filter(function(value){
  return value >= 15;
});

console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>