[英]Jquery data Attribute conditional Selector
我如何才能獲得所有屬性的“數據”值大於然后小於100小於500的DOM
<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;
});
看下面的例子:
在以下示例中,我假設只有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
。 不過,如果我們對您要嘗試做的事情了解更多,我懷疑可能會有更簡單的解決方案。
[ 編輯 ]添加了一個更簡單的方法,該方法使用元素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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.