2010-10-19 33 views
6

estoy usando línea siguiente y me gustaría que sea sensible a las mayúsculas jQuery selector:escritura entre mayúsculas y minúsculas versión

var matches = $(this).find('div > span > div#id_to_find[attributeName ^= "filter"]'); 
if (matches.length > 0) { 
} 

Mi pregunta es que ¿cómo puedo hacer que el selector de ^= a ser sensible a las mayúsculas ? ¿Tal vez cambiar a filtro y luego algunas expresiones regulares?

+0

I cosa aquí attr() de jQuery es la respuesta también: http: // stackoverflow. com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector – Diego

Respuesta

9

Para realizar una selección de atributos insensible a mayúsculas y minúsculas, debe escribir una selección personalizada o función

$.expr[':'].iAttrStart = function(obj, params, meta, stack) { 
    var opts = meta[3].match(/(.*)\s*,\s*(.*)/); 
    return (opts[1] in obj) && (obj[opts[1]].toLowerCase().indexOf(opts[2].toLowerCase()) === 0); 
}; 

Puede utilizar esta como esta:

$('input:iAttrStart(type, r)') 

Esto coincidirá con cualquier input elementos cuyo atributo type comienza con R o r (por lo que se correspondería con RADIO, radio, RESET o reset). Este es un ejemplo bastante tonto, pero debería hacer lo que necesita.


Re del comentario de que la función es difícil de entender, lo explicaré un poco.

$.expr[':'].iAttrStart = function(obj, params, meta, stack) { 

Esta es la firma estándar para crear selectores personalizados.

var opts = meta[3].match(/(.*)\s*,\s*(.*)/); 

meta es una matriz de detalles acerca de la llamada. meta[3] es la cadena pasada como parámetro. En mi ejemplo, esto es type, r. La expresión regular coincide con type y r por separado.

return (opts[1] in obj) && (obj[opts[1]].toLowerCase().indexOf(opts[2].toLowerCase()) === 0); 

regreso si ambos son verdad:

  1. existe El atributo solicitado en este objeto (opts[1] in obj)
  2. El término de búsqueda (cambiado a minúsculas) se encuentra en el comienzo de el valor de atributo del elemento, también cambiado a minúsculas.

Pude haber hecho esto más fácil de leer usando la sintaxis jQuery en lugar de la sintaxis nativa JS, pero eso hubiera significado un rendimiento reducido.

+0

¡Gracias por la solución! Tomó poco tiempo para descubrir qué función tiene, pero ahora, cuando lo entiendo, es agradable. – Tx3

+0

Sin preocupaciones. He agregado una explicación del código. – lonesomeday

+0

Edición muy agradable, gracias! – Tx3

2

Aquí se puede ver:

http://www.ericmmartin.com/creating-a-custom-jquery-selector/

Lo que tienes que hacer es crear un selector de jQuery personalizado:

jQuery.extend(jQuery.expr[':'], { 
    exactIgnoreCase: "(a.textContent||a.innerText||jQuery(a).text()||'').toLowerCase() == (m[3]).toLowerCase()" 
}); 

Y a continuación, sólo lo utilizan:

$("#detail select.fields option:exactIgnoreCase(" + q.val() + "):first"); 
+0

Gracias por la respuesta, pero creo que usaré la respuesta de lonesomeday esta vez – Tx3

0

Hay un pequeño problema al usar la respuesta de lonesomeday.

para reproducir el error, intente lo siguiente: etiqueta HTML en la página de Facebook es una etiqueta meta común:

<meta content="Title of og tag" property="og:title" /> 

Selector:

$('meta:attrCaseInsensitive(property, og:site_name)') 

Esto no funcionará. La razón es porque cuando el código del selector llega a la instrucción (opts[1] in obj) , ejecutará ("property" in obj), que devuelve falso. (No sé por qué)

Para solucionar este problema, acabo de cambiar la última línea para utilizar el método

$.expr[':'].iAttrStart = function(obj, params, meta, stack) { 
    var opts = meta[3].match(/(.*)\s*,\s*(.*)/); 
    return (undefined != $(obj).attr(opts[1])) && (obj[opts[1]].toLowerCase().indexOf(opts[2].toLowerCase()) === 0) 
}; 
Cuestiones relacionadas