Jquery data Attribute conditional Selector

Question

How can i get all DOM which attribute data-"value" in grater then 100 and less then 500

<div id="bg1" data-50="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
<div id="bg2" data-200="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
<div id="bg3" data-300="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>    
<div id="bg4" data-600="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
<div id="bg5" data-150="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
<div id="bg6" data-800="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>

what is reason for using different key for each numeric attribute? Wouldn't it make more sense to have same key for each element for the background and add a different attribute for the number? — charlietfl
– charlietfl, Commented Oct 18, 2014 at 12:59
there is no simple selector, or even a very simple filter for what you are asking because of the way you have set up the data attributes. It can be done using filter() but would need more information on what the numeric keys might be. What are you trying to do with this markup? — charlietfl
– charlietfl, Commented Oct 18, 2014 at 13:06
This smells like an xy problem. You'll probably get a way better solution if you explain what you're trying to achieve... — T J
– T J, Commented Oct 18, 2014 at 13:12
@charlietfl I found this concept at here prinzhorn.github.io/skrollr — Manan
– Manan, Commented Oct 20, 2014 at 4:51

Ram · Accepted Answer · 2014-10-18 13:24:17Z

1

You are misusing the data-* attributes. All the attribute selectors filter the elements by their attribute's value not but their attribute's name. There is no predefined selector here. You could iterate through the attributes and do it the hard way:

$('div').filter(function() {
    var a = this.attributes, l = a.length, n;
    for (var i = 0; i < l; i++) {
       if ( a[i].name.match(/^data-[0-9]+$/) ) {
           n = + a[i].name.replace('data-', '');
           return n > 100 && n < 500;
       }
    }
    return false;    
});

http://jsfiddle.net/jonpom9m/

edited Oct 18, 2014 at 13:24

answered Oct 18, 2014 at 13:12

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Banana · Accepted Answer · 2014-10-18 13:15:30Z

1

Have a look at the following example:

in the following example i assume that there are only 2 data attributes, and one of them is 'data-end'

$(function () {
    //we go through all of the dom elements:
    $("*").each(function () {
        //here we go through all of the attributes of the current element:
        $.each(this.attributes, function () {
            //if the attribute containts "data" in its name, and doesnt contain "end", then
            //its an attribute that we need. if you have more data attributes, you need
            //to filter them in the following condition as well:
            if (this.name.indexOf("data") > -1 && 
                this.name.indexOf("end")==-1) {
                //we extract the number from the data attribute:
                var lenght = this.name.length;
                var number_from_data=this.name.substring(5,lenght);
                var is_it_between_100_and_500;
                if(number_from_data>100 && number_from_data<500){
                    is_it_between_100_and_500=true;
                }
                else{
                    is_it_between_100_and_500=false;
                }
                console.log(this.name,is_it_between_100_and_500);
            }
        });
    });
});

EXAMPLE

answered Oct 18, 2014 at 13:15

Banana

7,4843 gold badges25 silver badges44 bronze badges

2 Comments

Bram Vanroy Over a year ago

Going through all DOM elements is almost always overkill. Something like $("[id^=bg]") ought to work better here.

Banana Over a year ago

i thought about that, but after having a 2nd look at his question i spotted the "How can i get all DOM"

KooiInc · Accepted Answer · 2014-10-19 11:27:41Z

Here's a double filtering to retrieve the elements with attribute data-[number] having number > 100 and number < 500. Still, if we knew more about what you are trying to do, I suspect a much simpler solution would be possible.

[Edit] added a simpler method using the elements outerHTML string for filtering

// FilterDivs: double filtering on attributes nodelist
// FilterDivs2: filter using a match in the outerHTML-string
// ----------------------------------------------------------
var filteredDivs = 
    $('[data-end]').filter( function (i, el) {
       return [].slice.call(el.attributes).filter(
           function (v) {
              var key = v.nodeName
                       ,isdatanum = /data\-\d/i.test(key)
                       ,val = isdatanum && +key.split('-')[1] || 0;
              return val > 100 && val < 500;
           }).length
     })
   ,filteredDivs2 = $('[data-end]').filter( function (i, el) {
         var number = +(el.outerHTML.match(/data-(\d+)=/) || [0,0])[1];
         return number > 100 && number < 500;
     });
//show result
$('#result').html('filteredDivs: '+
                  filteredDivs.toArray()
                   .map(function (v) {return '[div#'+v.id+']';}) +
                  ' (see console for actual elements)');
$('#result2').html('filteredDivs2: '+
                  filteredDivs2.toArray()
                   .map(function (v) {return '[div#'+v.id+']';}) +
                  ' (see console for actual elements)');
// log to console
console.log(filteredDivs);
console.log(filteredDivs2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg1" data-50="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
<div id="bg2" data-200="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
<div id="bg3" data-300="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>    
<div id="bg4" data-600="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
<div id="bg5" data-150="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
<div id="bg6" data-800="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
<div id="result"></div>
<div id="result2"></div>

guest271314 · Accepted Answer · 2014-10-20 07:11:22Z

Edit, Updated

Try

// return `filtered` array of `DOM` elememts  
// having `data-*` `key` greater than `rangeStart` and less than `rangeStop`
var elem = $("div")
, rangeStart = 100
, rangeStop = 500
, filtered = elem.filter(function(i, el) {
    var _range = Number( Object.keys( $(el).data() || el.dataset )[0] );
    return ( _range > rangeStart && _range < rangeStop )
}).get();

var elem = $("div")
, rangeStart = 100
, rangeStop = 500
, filtered = elem.filter(function(i, el) {
    var _range = Number( Object.keys( $(el).data() || el.dataset )[0] );
    return ( _range > rangeStart && _range < rangeStop )
}).get();

filtered.forEach(function(el) {
  el.style.color = "blue"
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bg1" data-50="background-position:0px 0px;" data-end="background-position:-500px -10000px;">50</div>
<div id="bg2" data-200="background-position:0px 0px;" data-end="background-position:-500px -8000px;">200</div>
<div id="bg3" data-300="background-position:0px 0px;" data-end="background-position:-500px -6000px;">300</div>    
<div id="bg4" data-600="background-position:0px 0px;" data-end="background-position:-500px -10000px;">600</div>
<div id="bg5" data-150="background-position:0px 0px;" data-end="background-position:-500px -8000px;">150</div>
<div id="bg6" data-800="background-position:0px 0px;" data-end="background-position:-500px -6000px;">800</div>

Collectives™ on Stack Overflow

Jquery data Attribute conditional Selector

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related