I have few textboxes and data-attrribute for installment number.

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

If my installment number is 15. i want to get controls have data-instno>=15. that means last 5 textboxes in this case.

I have few textboxes and data-attrribute for installment number.

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

If my installment number is 15. i want to get controls have data-instno>=15. that means last 5 textboxes in this case.

• javascript
• jquery
• html
• attributes
• custom-data-attribute

Share Improve this question Follow edited Mar 14, 2017 at 13:30 Mohammad 21.5k1616 gold badges5757 silver badges8585 bronze badges asked Mar 14, 2017 at 13:15 Prasanna Kumar JPrasanna Kumar J 1,62833 gold badges2121 silver badges3838 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Use jQuery Has Attribute Selector [name] to selecting target elements and use .filter() to filtering element has data-instno great than 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./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"/>

If you want to get value of data-instno use this

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

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

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

use this you will get this as an array