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

Question

我有几个文本框和 data-attrribute 分期付款编号。

<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

使用jQueryHas Attribute Selector [name] to selecting target elements and use .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"/>

Answer 2

var arrNumber = new Array();
$('input[type=text]').each(function(){
    if($(this).attr('data-instno') >= 15){
         arrNumber.push($(this).attr('data-instno'));
    }
});

使用这个你会得到一个数组

Answer 3

很简单JavaScript:

console.log( 
  [].filter.call(document.getElementsByTagName('INPUT'), 
    function(elem) {
      return elem.dataset.instno >= 15;
    })
);

<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"/>

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

How to get data-attribute value of elements which is greater than given value using jquery?

html

javascript

jquery

attributes

custom-data-attribute