C'è un modo per cercare attributi che iniziano con una determinata stringa in HTML

Question

C'è un modo per trovare tutti gli elementi con attributi che iniziano con una stringa particolare?

Sto usando framework Mootools e questo è quello che ho provato:

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

Ma appena uscite di tutti gli elementi della pagina.

Quindi c'è un modo per ottenere tutti gli elementi nella pagina con attributi che iniziano con, data-media-?

Answer 1

puoi filtrare gli elementi che devi già restituire con gli attributi data- * corrispondenti.

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

in azione: http://jsfiddle.net/dimitar/pgZDw/

rovescio della medaglia: già bisogno di passare su un insieme di elementi che abbiano un senso, ad esempio. div.pippo o #someid *

una soluzione più elegante sarebbe quella di aggiungere una pseudo :data() a 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-)")); 

esempio aggiornamento: http://jsfiddle.net/dimitar/pgZDw/3/

Answer 2

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

Answer 3

È possibile approssimare qualcosa di simile scorrendo gli attributi per ogni elemento nel contenitore, e di vedere se il nome dell'attributo corrisponde a un'espressione regolare per quello che stai cercando:

Ad esempio, in this jsFiddle, I am looking for li elements with the data-media-tv and data-media-dvd properties.

È possibile personalizzare la regex per restituire solo ciò che si desidera vedere. Vuoi vedere solo gli elementi che hanno un data-media- * (come nella tua domanda)? Here you go.

---

Tenete a mente che questo non è esattamente scalabile. Poiché stiamo iterando attraverso ogni singolo elemento della pagina e controllando ogni singolo attributo (ma torniamo presto se trovato), questo può e sarà probabilmente lento per le pagine di grandi dimensioni.

Limita questo a SOLO il contenitore che vuoi cercare, o solo gli elementi che vuoi scorrere attraverso! Se lo esegui contro document.body, itererà attraverso ogni singolo elemento nella pagina, non sarò responsabile se la tua casa dovesse bruciare di conseguenza. :)

---

Qui è la funzione-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; 
}; 

In elements, passare solo negli elementi che si desidera controllare, possibilmente selezionato tramite $$. Se si desidera controllare tutti gli elementi in un elemento del contenitore, sostituire elements con container e container.getChildren() in ogni istanza di element, sopra.

Answer 4

provare this jsfiddle basta conoscere il (comune) Indice/posizione dell'attributo data-media-* e utilizzare di conseguenza il codice.