有沒有一種方法來搜索以HTML中的某個字符串開頭的屬性

Question

有沒有辦法找到所有具有以特定字符串開頭的屬性的元素？

我使用MooTools的框架，這是我曾嘗試：

$$('*[data-media-*]'); 

，但它只是輸出頁面中所有的元素。

那麼有沒有辦法讓頁面中所有具有以data-media-開頭的屬性的元素？

Answer 1

您可以過濾您必須返回具有匹配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-)")); 

更新例如：http://jsfiddle.net/dimitar/pgZDw/3/

Answer 2

$$('div[attrName="attrnameValue"]').each(function() { 
    // `this` is the div 
}); 

Answer 3

您可以通過在容器中的每個元素的屬性迭代，看到屬性名稱是否爲你所尋找的正則表達式匹配近似這樣的事情：

例如，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()。

Answer 4

嘗試this jsfiddle 只知道（通用）指數/位置的屬性data-media-*並相應地在代碼中使用。