¿Existe una versión que no distinga entre mayúsculas y minúsculas de : contiene el selector jQuery o debería hacer el trabajo manualmente al recorrer todos los elementos y comparar su .text () con mi cadena?
¿Existe una versión que no distinga entre mayúsculas y minúsculas de : contiene el selector jQuery o debería hacer el trabajo manualmente al recorrer todos los elementos y comparar su .text () con mi cadena?
Respuestas:
Lo que terminé haciendo para jQuery 1.2 es:
jQuery.extend(
jQuery.expr[':'], {
Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0"
});
Esto extenderá jquery para tener un: Contiene un selector que no distingue entre mayúsculas y minúsculas, el selector: contiene permanece sin cambios.
Editar: para jQuery 1.3 (gracias @ user95227) y más tarde necesita
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
Editar: Aparentemente acceder al DOM directamente usando
(a.textContent || a.innerText || "")
en vez de
jQuery(a).text()
En la expresión anterior se acelera considerablemente, así que intente bajo su propio riesgo si la velocidad es un problema. (ver la pregunta de @John )
Última edición: para jQuery 1.8 debería ser:
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Para hacerlo opcionalmente insensible a mayúsculas y minúsculas: http://bugs.jquery.com/ticket/278
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
luego use en :containsi
lugar de:contains
A partir de jQuery 1.3, este método está en desuso. Para que esto funcione, debe definirse como una función:
jQuery.expr[':'].Contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
Si alguien (como yo) le interesa lo que hacer una y m [3] en la media Contiene definición.
CLAVE / LEYENDA: Parámetros puestos a disposición por jQuery para usar en las definiciones del selector:
r = jQuery matriz de elementos que se analizan. (por ejemplo: r.length = Número de elementos)
i = índice del elemento actualmente bajo escrutinio, dentro de la matriz r .
a = elemento actualmente bajo escrutinio. La instrucción del selector debe devolver verdadero para incluirlo en sus resultados coincidentes.
m [2] = nodeName o * que estamos buscando (a la izquierda de los dos puntos).
m [3] = parámetro pasado al: selector (parámetro). Por lo general, un número de índice, como en : nth-of-type (5) , o una cadena, como en : color (azul) .
En jQuery 1.8 deberás usar
jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {
return function (elem) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Una variación que parece funcionar un poco más rápido y que también permite expresiones regulares es:
jQuery.extend (
jQuery.expr[':'].containsCI = function (a, i, m) {
//-- faster than jQuery(a).text()
var sText = (a.textContent || a.innerText || "");
var zRegExp = new RegExp (m[3], 'i');
return zRegExp.test (sText);
}
);
Esto no solo distingue entre mayúsculas y minúsculas, sino que permite búsquedas potentes como:
$("p:containsCI('\\bup\\b')")
(Coincide "Arriba" o "arriba", pero no "superior", "despertar", etc.)$("p:containsCI('(?:Red|Blue) state')")
(Coincide con "estado rojo" o "estado azul", pero no con "estado activo", etc.)$("p:containsCI('^\\s*Stocks?')")
(Coincide con "stock" o "stock", pero solo al comienzo del párrafo (ignorando cualquier espacio en blanco).)Puede llegar tarde ... pero,
Prefiero ir por este camino ...
$.extend($.expr[":"], {
"MyCaseInsensitiveContains": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
De esta manera, NO altere los '.contains' NATIVOS de jQuery ... Es posible que necesite el predeterminado más tarde ... si lo manipula, es posible que vuelva a stackOverFlow ...
jQuery.expr[':'].contains = function(a,i,m){
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
El código de actualización funciona muy bien en 1.3, pero "contiene" debe estar en minúscula en la primera letra a diferencia del ejemplo anterior.
:contains
y :Contains
ambos funcionen simultáneamente.
Consulte a continuación para usar ": contiene" para buscar texto que ignore su distinción entre mayúsculas y minúsculas de un código HTML,
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
$("#searchTextBox").keypress(function() {
if($("#searchTextBox").val().length > 0){
$(".rows").css("display","none");
var userSerarchField = $("#searchTextBox").val();
$(".rows:contains('"+ userSerarchField +"')").css("display","block");
} else {
$(".rows").css("display","block");
}
});
También puede usar este enlace para encontrar el código de ignorar mayúsculas y minúsculas basado en su versión de jquery, Make jQuery: contiene mayúsculas y minúsculas
Una versión más rápida que usa expresiones regulares.
$.expr[':'].icontains = function(el, i, m) { // checks for substring (case insensitive)
var search = m[3];
if (!search) return false;
var pattern = new RegExp(search, 'i');
return pattern.test($(el).text());
};
Tuve un problema similar con el siguiente no funciona ...
// This doesn't catch flac or Flac
$('div.story span.Quality:not(:contains("FLAC"))').css("background-color", 'yellow');
Esto funciona y sin la necesidad de una extensión
$('div.story span.Quality:not([data*="flac"])').css("background-color", 'yellow');
Esto también funciona, pero probablemente cae en la categoría de "bucle manual" ...
$('div.story span.Quality').contents().filter(function()
{
return !/flac/i.test(this.nodeValue);
}).parent().css("background-color", 'yellow');
Nueva una variable, le doy el nombre de subString y pongo la cadena que desea buscar en algunos elementos de texto. Luego, usando los elementos de selección del selector Jquery que necesita, como mi ejemplo, $("elementsYouNeed")
y filtre por .filter()
. En el .filter()
comparará cada elemento en$("elementsYouNeed")
con la función.
En la función que uso .toLowerCase()
para el texto del elemento también subString que puede evitar la condición sensible a mayúsculas y minúsculas y verificar si hay una subString en ella. Después de eso, el .filter()
método construye un nuevo objeto jQuery a partir de un subconjunto de los elementos coincidentes.
Ahora puede obtener los elementos de coincidencia en matchObjects y hacer lo que quiera.
var subString ="string you want to match".toLowerCase();
var matchObjects = $("elementsYouNeed").filter(function () {return $(this).text().toLowerCase().indexOf(subString) > -1;});