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

【问题标题】：How to get data-attribute value of elements which is greater than given value using jquery?如何使用jquery获取大于给定值的元素的数据属性值？
【发布时间】：2017-08-04 20:24:57
【问题描述】：

我有几个文本框和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 个文本框。

【问题讨论】：

标签： javascript jquery html attributes custom-data-attribute

【解决方案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"/>

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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"/>

【讨论】：