Selectores múltiples

_cronos2 · #1 (**permalink**) 02/04/2011, 15:03

Buenas gente, hasta ahora la función P de mi intento librería (XD) sólo manejaba un elemento. Es decir:

Código Javascript:

Ver originalvar foo = P('.bar');

Sólo devolvía el primer .bar porque usaba document.querySelector . Ahora estoy intentando poder usar todas las coincidencias con document.querySelectorAll, pero me veo en problemas. Por ejemplo:

Código Javascript:

Ver originalopacity : function(opct){
   if(this[0]){
    for(var i = 0; act = this[i]; i++){ act.opacity(opct); }
   }
   if(opct){
    this.style.opacity = opct;
    this.style.MozOpacity = opct;
    this.style.KhtmlOpacity = opct;
    this.style.zoom = 1;
    this.style.filter = 'alpha(opacity=' + opct * 100 + ')';
   }else{ return P(this).getStyle('opacity'); }
   return P(this);
  }

Pero claro, opacity se añade como método de un elemento, no de un array de elementos que es lo que devuelve document.querySelectorAll. ¿Qué puedo hacer para solucionar este problema?
Saludos (:

zerokilled · #2 (**permalink**) 02/04/2011, 15:42

buenas...

asi a la ligera, lo que se me ocurre es crear un array y recorrer la lista de nodos devuelta por querySelectorAll aplicandole la extension. es decir, creando el objeto que contiene los metodos de tu libreria. luego ese objeto lo almacenas en el array y finalmente devuelves el array en lugar del NodeList. esto porque los elementos de un NodeList no puedes alterarlo.

_cronos2 · #3 (**permalink**) 02/04/2011, 15:54

Si te fijas lo tengo así:

Código Javascript:

Ver originalextender : function(elem, obj){
   if(elem[0]){
    for(var i = 0; act = elem[i]; i++){ JSPlus.extender(act, privado); }
    return elem;
   }
   if(elem.extendido && elem != privado) return elem;
   for(var i in obj){
    elem[i] = obj[i];
   }
   return elem;
  }

¿Cambiaría si en vez de devolver así a pelo devuelvo un verdadero aray?
Saludos (:

zerokilled · #4 (**permalink**) 02/04/2011, 16:26

creo que ya entendi la situacion inicial. ¿tu quieres que el NodeList devuelto por querySelectorAll sea extendido de modo que al invocar los metodos estos se apliquen a todos los elementos del NodeList? por decir un ejemplo...

Código:

P("li").salida("lento");
// todos los elementos <li> encontrados deberian desaparecer ;

yo lo estaba viendo mas desde el punto de vista donde todos los elementos del NodeList sean extendidos. de modo que luego invocas los metodos por cada elemento por separado. de hecho, asi es como lo tienes ahora mismo.

_cronos2 · #5 (**permalink**) 02/04/2011, 16:57

Exactamente, lo que quiero es que el método se aplique a todo el NodeList como si estuviera siendo invocado para un sólo elemento. Y como es la única manera que se me ocurrió, lo que pretendía hacer para que funcionara es comprobar en cada método si this era un array y dado el caso invocarlo por cada elemento del array. Espero que se me haya entendido

Saludos (:

masterpuppet · #6 (**permalink**) 02/04/2011, 20:03

Que tal _cronos2,

no seria mejor que crearas una clase para manejar las colecciones de elements(JSPLus.NodeList), y utilizarla de proxy a los métodos de los elements en vez de estar en cada método comprobando que es un array ?

Panino5001 · #7 (**permalink**) 03/04/2011, 01:40

Un ejemplo (muy poco optimizado) para las colecciones:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<script type="text/javascript">
if (!Array.prototype.forEach){
    Array.prototype.forEach = function(fun){
        if (typeof fun != "function") throw new TypeError();
          for (var i = 0,l=this.length; i < l; i++) {
               if (i in this) fun.call(arguments[1], this[i], i)
          }
          return this;
    }
}
var pp=(function(){
/* ---- métodos privados ---- */
    var metodosColeccion={
        css:function(){
            var args=[].slice.call(arguments);
            this.forEach(function(el){metodosPrivados.css.apply(el,args)});
            return this;
        },
        addEvent:function(){
            var args=[].slice.call(arguments);
            this.forEach(function(el){metodosPrivados.addEvent.apply(el,args)});
            return this;
        }
    };
    var metodosPrivados={
         css:function(propiedad,valor){
             if(!valor)
                return this.style[propiedad];
            this.style[propiedad]=valor;
            return this;
         },
         addEvent: function(type, fn ) {
            if ( this.addEventListener ) {
                this.addEventListener( type, fn, false );
            } else if(this.attachEvent){
                var _this=this;
                var f= function(){fn.call(_this,window.event);}
                this.attachEvent( 'on'+type, f);
                this[fn.toString()+type]=f;
            }else{
                this['on'+type]=fn;
            }
            var ev={_obj:this,_evType:type,_fn:fn};
            window.EvRegister=window.EvRegister || [];
            window.EvRegister.push(ev);
            return this;
        },
        extendido:true
    };
/* ---- métodos públicos ---- */
    return{
        extend:function(el,obj){
            if(el.extendido && el!=metodosPrivados)return el;
            for(var i in obj)
                el[i]=obj[i];
            return el;
        },
        get:function(id){
            if(!document.getElementById(id))return false;
            return pp.extend(document.getElementById(id),metodosPrivados);
        },
        getO:function(obj){
            return pp.extend(obj,metodosPrivados);
        },
        add:function(obj){
            pp.extend(metodosPrivados,obj);
        },
        getByTag:function(tag,ctx){
            var d=ctx || document,col=d.getElementsByTagName(tag),ret=[],i,l=col.length;
            for(i=0;i<l;i++){
                ret.push(col[i]);
            }
            ret.forEach(function(el){pp.extend(el,metodosPrivados);});
            return pp.extend(ret,metodosColeccion);
            
        }
        
    }    
})();
onload=function(){
    pp.getByTag('li').css('color','red').addEvent('click',function(){alert(this.css('color'));});
}
</script>

</head>

<body>
<ul><li>uno</li><li>dos</li><li>tres</li></ul>
</body>
</html>

Para no hacer un motor de selectores (para los navegadores que no soportan la api Selector), que es muy complejo (uno de los que más me gusta es el de Simon Willison: http://simonwillison.net/2003/Mar/25...ntsBySelector/), agregué como ejemplo el método getByTag. Fijate que agregué también un objeto metodosColeccion
para extender el nodeList. Esa parte se puede simplificar, ya que si observás los métodos css y addEvent de ese objeto son casi iguales entre sí, así que lo mejor sería recorrer el objeto métodosPrivados y aplicar para cada método de ese objeto una función semejante a esas que digo que son redundantes para extender la colección. Lo que quiero decir es que ni siquiera hace falta crear el objeto metodosColeccion para extender la funcionalidad del nodeList, pero así es más didáctico y ya teniendo la idea seguro que la mejorás, como venís haciendo hasta ahora ;)

Edito:
Lo que decía de evitar redundancias era algo así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&#237;tulo</title>
<script type="text/javascript">
if (!Array.prototype.forEach){
    Array.prototype.forEach = function(fun){
        if (typeof fun != "function") throw new TypeError();
          for (var i = 0,l=this.length; i < l; i++) {
               if (i in this) fun.call(arguments[1], this[i], i)
          }
          return this;
    }
}
var pp=(function(){
/* ---- métodos privados ---- */
    
    var metodosPrivados={
         css:function(propiedad,valor){
             if(!valor)
                return this.style[propiedad];
            this.style[propiedad]=valor;
            return this;
         },
         addEvent: function(type, fn ) {
            if ( this.addEventListener ) {
                this.addEventListener( type, fn, false );
            } else if(this.attachEvent){
                var _this=this;
                var f= function(){fn.call(_this,window.event);}
                this.attachEvent( 'on'+type, f);
                this[fn.toString()+type]=f;
            }else{
                this['on'+type]=fn;
            }
            var ev={_obj:this,_evType:type,_fn:fn};
            window.EvRegister=window.EvRegister || [];
            window.EvRegister.push(ev);
            return this;
        },
        extendido:true
    };
/* ---- métodos públicos ---- */
    return{
        extend:function(el,obj){
            if(el.extendido && el!=metodosPrivados)return el;
            for(var i in obj)
                el[i]=obj[i];
            return el;
        },
        get:function(id){
            if(!document.getElementById(id))return false;
            return pp.extend(document.getElementById(id),metodosPrivados);
        },
        getO:function(obj){
            return pp.extend(obj,metodosPrivados);
        },
        add:function(obj){
            pp.extend(metodosPrivados,obj);
        },
        getByTag:function(tag,ctx){
            var d=ctx || document,col=d.getElementsByTagName(tag),ret=[],i,l=col.length;
            for(i=0;i<l;i++){
                ret.push(col[i]);
            }
            ret.forEach(function(el){pp.extend(el,metodosPrivados);});
            if(ret.extendido)return ret;
            for(var n in metodosPrivados){
                        if(typeof metodosPrivados[n]=='function'){
                            (function(){
                                  var mp=metodosPrivados[n];
                                  ret[n]=function(){
                                        var args=[].slice.call(arguments);
                                        ret.forEach(function(el){mp.apply(el,args)});
                                      return ret;
                                   }
                           })();
                        }else{
                            (function(){
                                ret[n]=metodosPrivados[n];
                            })();
                        }
            }
            return ret;
        }
    }    
})();
onload=function(){
    pp.getByTag('li').css('color','red').addEvent('click',function(){alert(this.css('color'));});
}
</script>

</head>

<body>
<ul><li>uno</li><li>dos</li><li>tres</li></ul>
</body>
</html>

_cronos2 · #8 (**permalink**) 03/04/2011, 08:51

Cita:

Iniciado por masterpuppet

Que tal _cronos2,

no seria mejor que crearas una clase para manejar las colecciones de elements(JSPLus.NodeList), y utilizarla de proxy a los métodos de los elements en vez de estar en cada método comprobando que es un array ?

Me perdí a partir de proxy

Cita:

Iniciado por Panino5001

Lo que quiero decir es que ni siquiera hace falta crear el objeto metodosColeccion para extender la funcionalidad del nodeList, pero así es más didáctico y ya teniendo la idea seguro que la mejorás, como venís haciendo hasta ahora ;)

Muchas gracias por el piropo

¡Funciona perfectamente hasta en IE!

Así queda el código de momento, muchas gracias a todos, os debo un montón de karma XD
Saludos (: