CODEWITHSUNDEEP
javascriptjqueryhtmlattributescustom-data-attribute
Prasanna Kumar J
Prasanna Kumar J

Reputation: 1598

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

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.

Upvotes: 2

Views: 3748

Answers (3)

Mohammad
Mohammad

Reputation: 21489

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

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

Upvotes: 3

Mudassar Zahid
Mudassar Zahid

Reputation: 305

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

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28387

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

Upvotes: 2

Related Questions