Question

我如何获得属性数据的所有DOM - ＆＃34;值＆＃34;在磨碎机中然后是100且小于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>

Answer 1

您滥用data-*属性。所有属性选择器都按其属性值过滤元素，但不是属性名称。这里没有预定义的选择器。您可以遍历attributes并以艰难的方式完成：

$('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/

Answer 2

看一下以下示例：

在以下示例中，我假设只有2个数据属性，其中一个是数据结束＆＃39;

$(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

Answer 3

这是一个双重过滤，用于检索属性data-[number]具有number > 100 and number < 500的元素。尽管如此，如果我们更多地了解您要做的事情，我怀疑可能会有一个更简单的解决方案。

[编辑]添加了一个更简单的方法，使用元素outerHTML字符串进行过滤

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

Answer 4

修改，更新

尝试

// 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();

＆＃13;

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"
})

＆＃13;

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

＆＃13;

Jquery数据属性条件选择器

4 个答案: