2011-04-20 18 views
51

Normalmente, cuando uso una clase como selector, trato de usar un selector "id" para que no busque en toda la página, sino solo en un área donde estaría la clase.Encadenamiento de selector múltiple en jQuery?

Sin embargo, tengo una vista parcial con el código en ella. Esta vista parcial (código común) se ajusta a una etiqueta de formulario.

que tengo:

<form id="Create"> 
// load common code in from partial view 
</form> 

<form id="Edit"> 
// load common code in from partial view 
</form> 

Ahora en este código común que necesita conectar un plugin para múltiples campos de modo que lo haría

$('#Create .myClass').plugin({ options here}); 

$('#Edit .myClass').plugin({options here}); 

Por lo tanto, es más o menos el mismo código. Me pregunto si hay alguna forma de que busque alguno de los id.

Editar

Estoy teniendo problemas con él cuando tengo las variables para mis selectores

my.selectors = 
    { 
     A: '#Create', 
     B: '#Edit', 
     Plugin: ' .Plugin' 
    }; 

$(selector.A+ selectors.Plugin, selector.B+ selectors.Plugin) 

No parece funcionar.

Respuesta

71

Se pueden combinar varios selectores con una coma:

$('#Create .myClass,#Edit .myClass').plugin({options here}); 

O si vas a tener un montón de ellos, se podría añadir una clase a todos sus elementos de forma y luego buscar dentro de esa clase. Esto no te da el supuesto ahorro de velocidad de restringir la búsqueda, pero honestamente no me preocuparía demasiado si fuera tú. Los navegadores hacen muchas cosas sofisticadas para optimizar las operaciones comunes a tus espaldas: el selector de clase simple podría ser más rápido.

6

gustan:

$('#Create .myClass, #Edit .myClass').plugin({ 
    options: here 
}); 

se puede especificar cualquier número de selectores de combinar en una sola resultado. Este combinador de expresión múltiple es una forma eficiente de seleccionar elementos dispares. El orden de los elementos DOM en el objeto jQuery devuelto puede no ser idéntico, como estarán en orden de documento. Una alternativa a este combinador es el método .add().

37

$("#Create").find(".myClass").add("#Edit .myClass").plugin({});

Uso $.fn.add para concatenar dos conjuntos.

8

Creo que es posible que vea un poco mejor rendimiento al hacerlo de esta manera:

$("#Create, #Edit").find(".myClass").plugin(){ 
    // Options 
}); 
0

Ya hay muy buenas respuestas aquí, pero en algunos otros casos (no esto en particular) usando el mapa podría ser la "única" solución.

Especialmente cuando queremos utilizar expresiones regulares, distintas de las estándar.

Para este caso, se vería así:

$('.myClass').filter(function(index, elem) { 
    var jElem = $(elem); 

    return jElem.closest('#Create').length > 0 || 
      jElem.closest('#Edit').length > 0; 

}).plugin(...); 

como he dicho antes, aquí esta solución podría ser inútil, pero para otros problemas, es una muy buena opción