Czy istnieje sposób wyszukiwania atrybutów rozpoczynających się od określonego ciągu w kodzie HTML?

Question

Czy istnieje sposób na znalezienie wszystkich elementów z atrybutami zaczynającymi się od określonego ciągu?

Używam MooTools ramy i to próbowałem:

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

Ale to właśnie wyprowadza wszystkie elementy na stronie.

Czy istnieje sposób uzyskania wszystkich elementów na stronie, które mają atrybuty rozpoczynające się od: data-media-?

Answer 1

możesz filtrować elementy, które już musisz zwrócić, z odpowiednimi atrybutami danych *.

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')); 

w akcji: http://jsfiddle.net/dimitar/pgZDw/

minusem: już trzeba przekazać go na zbiór elementów, które mają sens, np. div.foo lub #someid *

bardziej eleganckim rozwiązaniem byłoby dodanie :data() pseudo do Slick:

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

aktualizowane przykład: http://jsfiddle.net/dimitar/pgZDw/3/

Answer 2

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

Answer 3

Można zbliżenie coś takiego przez iteracja atrybutów dla każdego elementu w kontenerze, a widząc, czy nazwa atrybutu pasuje regex dla czego szukasz:

Na przykład, in this jsFiddle, I am looking for li elements with the data-media-tv and data-media-dvd properties.

Możesz dopasować wyrażenie regularne, aby zwracać tylko to, co chcesz zobaczyć. Chcesz widzieć tylko te elementy, które mają dane-media- * (jak w twoim pytaniu)? Here you go.

---

Należy pamiętać, że to nie jest dokładnie to, skalowalne. Ponieważ przechodzimy przez każdy element na stronie i sprawdzamy każdy pojedynczy atrybut (ale wracamy wcześniej, jeśli zostanie znaleziony), może to i będzie prawdopodobnie powolne w przypadku dużych stron.

Ogranicz to do TYLKO kontenera, który chcesz przeszukać, lub tylko te elementy, które chcesz poddać iteracji! Jeśli uruchomisz to przeciwko document.body, będzie on iterować po każdym elemencie na stronie, nie będę odpowiedzialny za to, czy Twój dom zostanie spalony w wyniku. :)

---

Tutaj jest funkcja-ized:

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

W elements, przechodzą tylko w elementach, które chcesz sprawdzić, ewentualnie wybrany przez $$. Jeśli chcesz sprawdzić wszystkie elementy w elemencie kontenera, zamień elements na container i container.getChildren() w każdym wystąpieniu element powyżej.

Answer 4

spróbować this jsfiddle tylko znać (wspólne) indeks/stanowisko atrybutu data-media-* i użyj odpowiednio w kodzie.