javascript - validacion - ¿Hay alguna manera de buscar atributos que comiencen con cierta cadena en HTML?

validar formulario javascript html5

Question

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

Estoy usando el framework Mootools y esto es lo que he intentado:

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

Pero solo muestra todos los elementos en la página.

Entonces, ¿hay alguna forma de obtener todos los elementos en la página que tengan atributos que comiencen con, data-media- ?

Answer 1

Puede aproximarse a algo así repitiendo los atributos de cada elemento en el contenedor y viendo si el nombre del atributo coincide con una expresión regular para lo que está buscando:

Por ejemplo, en este jsFiddle, estoy buscando elementos li con las propiedades data-media-tv y data-media-dvd .

Puede adaptar 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)? Aquí tienes .

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 regresando temprano si se encuentra), esto puede y probablemente será lento para páginas grandes.

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

Aquí está funcionalizado:

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 , solo pase los elementos que desea verificar, posiblemente seleccionados mediante $$ . Si desea verificar todos los elementos en un elemento contenedor, reemplace elements con container y container.getChildren() en cada instancia de element , arriba.

Answer 2

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

Answer 3

pruebe este jsfiddle solo conozca el índice / posición (común) del atributo data-media-* y utilícelo en el código correspondiente.

Answer 4

puede filtrar los elementos que ya tiene para devolver los que tengan los atributos correspondientes 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/

desventaja: ya debe pasarlo en una colección de elementos que tengan sentido, ej. div.foo o #someid *

una solución más elegante sería agregar 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 actualizado: http://jsfiddle.net/dimitar/pgZDw/3/