¿Hay alguna manera de buscar los atributos que comienzan con una cierta cadena en HTML

Question

¿Hay alguna forma de encontrar todos los elementos con atributos que comiencen con una cadena en particular?

estoy usando Mootools marco y esto es lo que he intentado:

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

Pero simplemente salidas todos los elementos de la página.

Entonces, ¿hay alguna manera de obtener todos los elementos en la página que tienen atributos que comienzan con data-media-?

Answer 1

puede filtrar los elementos que ya tiene para devolver los que tengan los mismos atributos 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')); 

en acción: http://jsfiddle.net/dimitar/pgZDw/

inconveniente: ya que pasarla en una colección de elementos que tienen sentido, por ejemplo. div.foo o #someid *

una solución más elegante sería añadir un 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-)")); 

ejemplo actualización: http://jsfiddle.net/dimitar/pgZDw/3/

Answer 2

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

Answer 3

Puede aproximarse a algo como esto por iteración a través de los atributos de cada elemento en el recipiente, y ver si el nombre del atributo coincide con una expresión regular para lo que busca:

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

Puede personalizar la expresión regular para devolver solo lo que desea ver. ¿Desea solo ver los elementos que tienen un data-media- * (como en su pregunta)? Here you go.

---

Tenga en cuenta que esto no es exactamente escalable. Debido a que estamos iterando a través de cada elemento en la página, y comprobando cada atributo individual (pero volviendo temprano si se encuentra), esto puede y probablemente sea lento para páginas grandes.

¡Limite esto SOLAMENTE al contenedor que desea buscar, o solo a los elementos que desea recorrer! Si ejecuta esto en document.body, recorrerá cada elemento de la página, no seré responsable si su casa se quema como resultado. :)

---

Aquí es función-zado:

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

En elements, sólo pasan en los elementos que desea comprobar, posiblemente seleccionado a través de $$. Si desea verificar todos los elementos en un elemento contenedor, reemplace elements con container y container.getChildren() en cada instancia de element, arriba.

Answer 4

tratar this jsfiddle acaba de conocer el (común)/índice de posición del atributo data-media-* y uso en el código en consecuencia.