Jquery数据属性条件选择器
Jquery data Attribute conditional Selector
我如何获得所有属性数据的DOM-"值"在grater然后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>
您滥用了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/
看看下面的例子:
在下面的例子中,我假设只有2个数据属性,其中一个是"数据端"
$(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);
}
});
});
});
示例
这里有一个双重过滤,用于检索属性为data-[number]
且具有number > 100 and number < 500
的元素。尽管如此,如果我们对你想做的事情有更多的了解,我怀疑一个更简单的解决方案是可能的。
[Edit]添加了一个更简单的方法,使用元素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>
编辑、更新
尝试
// 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>
相关文章:
- Jquery - 如果条件为真,则遍历选择器并执行某些操作
- jQuery选择器中的条件处理
- 在条件中的几个时间行中设置自定义css效果后,从Jquery时间选择器显示时间
- 如何在jQuery选择器中具有“and”和“or”条件
- 如何在jQuery中定义条件属性选择器
- 如何在 HTML5 中的日期选择器中对所选月份应用条件
- 带有jQuery Mobile的多个条件选择器
- jquery选择器可以选择所有具有子节点的元素与某些条件匹配
- jquery:如果第一个选择器返回为空,有没有一种简明的方法可以有条件地使用第二个选择器
- 启动日期选择器在条件下禁用和启用
- jQuery选择器中的条件
- Jquery数据属性条件选择器
- jquery具有AND OR条件的多个选择器
- jQuery UI日期选择器条件混乱.有更干净的方法吗
- 如何在javascript id选择器中使用if条件.我不想运行'window.addeventlistener
- Jquery CSS选择器需要满足三个条件
- 如何使用带有OR条件的多个类选择器
- 具有多于1个条件的jQuery选择器
- 按条件打开日期选择器
- javascript中的条件下拉菜单,选择器出现问题