有沒有辦法找到所有具有以特定字符串開頭的屬性的元素?有沒有一種方法來搜索以HTML中的某個字符串開頭的屬性
我使用MooTools的框架,這是我曾嘗試:
$$('*[data-media-*]');
,但它只是輸出頁面中所有的元素。
那麼有沒有辦法讓頁面中所有具有以data-media-
開頭的屬性的元素?
有沒有辦法找到所有具有以特定字符串開頭的屬性的元素?有沒有一種方法來搜索以HTML中的某個字符串開頭的屬性
我使用MooTools的框架,這是我曾嘗試:
$$('*[data-media-*]');
,但它只是輸出頁面中所有的元素。
那麼有沒有辦法讓頁面中所有具有以data-media-
開頭的屬性的元素?
您可以過濾您必須返回具有匹配data- *屬性的元素。
Elements.implement({
filterData: function(substring){
return this.filter(function(element){
var attribs = element.attributes,
len,
ii = 0;
for (len = attribs.length; ii < len; ++ii) {
if (attribs[ii].name.indexOf('data-') === 0 && attribs[ii].name.indexOf(substring) !== -1) {
return true;
}
}
});
}
});
console.log($$("div").filterData('foo'));
console.log($$("div").filterData('bar'));
console.log($$("div").filterData('oba'));
在行動:http://jsfiddle.net/dimitar/pgZDw/
缺點:你已經需要通過它有意義,例如元素的集合。 DIV。FOO或#someid *
一個更優雅的解決辦法是增加一個:data()
僞到油滑:
(function(){
// cache reusable string
var data = 'data',
hyphen = '-',
// set the fallback via XMLSerializer, if no outerHTML (eg. FF 2 - 10)
XS = this.XMLSerializer && new XMLSerializer();
Slick.definePseudo(data, function(value){
return (this.outerHTML || XS.serializeToString(this)).test([data, value].join(hyphen));
});
}());
console.log($$("div:data(foo)"));
console.log($$(":data(media-)"));
$$('div[attrName="attrnameValue"]').each(function() {
// `this` is the div
});
這不是OP要求的。 – Daedalus
您可以通過在容器中的每個元素的屬性迭代,看到屬性名稱是否爲你所尋找的正則表達式匹配近似這樣的事情:
例如,in this jsFiddle, I am looking for li
elements with the data-media-tv
and data-media-dvd
properties。
您可以調整正則表達式以僅返回您想要查看的內容。想只看到具有data-media- *的元素(比如在你的問題中)? Here you go。
記住這是不完全可擴展的。因爲我們遍歷頁面上的每一個元素,並檢查每一個屬性(但如果找到的話會提早返回),這對大頁面來說可能並且可能會很慢。
僅限您想要搜索的容器,或僅限您想要遍歷的元素!如果您針對document.body
運行此操作,它將遍歷頁面中的每個元素,如果您的房屋因此而燒燬,我將不負責任。 :)
這功能美化版:
function attrMatch(elements, regexp) {
// Iterate through all passed-in elements, return matches
var matches = elements.filter(function(li) {
var numAttr = li.attributes.length;
for(x=0;x<numAttr;x++) {
var attr = li.attributes[x];
return attr['name'].test(regexp);
}
});
return matches;
};
在elements
,只有通過在要檢查的元素,可能通過$$
選擇。如果要檢查容器元素中的所有元素,請在上面的每個示例element
中將elements
替換爲container
和container.getChildren()
。
嘗試this jsfiddle 只知道(通用)指數/位置的屬性data-media-*
並相應地在代碼中使用。
試試jsFiddle?是的,這非常有幫助。 – BoltClock
那裏的代碼有什麼問題? –
你可以發佈一些示例html嗎? – Daedalus
看起來你必須添加一些其他屬性來統一元素。 – Niemand
一個兼容的CSS選擇器實現將輸出*無元素*,因爲這是無效的... – BoltClock