javascript - not - ¿Hay un caso jQuery insensible: contiene el selector?

jquery parent

Question

¿Existe una versión insensible a mayúsculas / minúsculas de :contains selector jQuery o debería hacer el trabajo manualmente al pasar el cursor sobre todos los elementos y comparar su .text () con mi cadena?

Answer 1

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;
};

Answer 2

En jQuery 1.8 necesitarás usar

jQuery.expr[":"].icontains = jQuery.expr.createPseudo(function (arg) {                                                                                                                                                                
    return function (elem) {                                                            
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;        
    };                                                                                  
});

Answer 3

Lo que terminé haciendo para jQuery 1.2 es:

jQuery.extend(
    jQuery.expr['':''], { 
        Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});

Esto ampliará jquery para tener un: Contiene un selector que no distingue entre mayúsculas y minúsculas, el selector: contains permanece sin cambios.

Editar: para jQuery 1.3 (gracias @ user95227) y luego necesita

jQuery.expr['':''].Contains = function(a,i,m){
     return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

Editar: al parecer, acceder al DOM directamente mediante el uso

(a.textContent || a.innerText || "") 

en lugar de

jQuery(a).text()

En la expresión anterior, se acelera considerablemente, así que prueba bajo tu propio riesgo si la velocidad es un problema. (vea la question @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;
    };
});

Answer 4

Para que, opcionalmente, no distinga entre 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 :containsi lugar de :contains

Answer 5

Puede ser 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 manipulas los NATIVE ''.contains'' de jQuery ... Es posible que necesites el predeterminado una vez más ... si se manipula, puedes volver a ...

Answer 6

Si alguien (como yo) está interesado, ¿qué significa a y m [3] en Definición de contenido?

CLAVE / LEYENDA: Parámetros puestos a disposición por jQuery para su uso en las definiciones del selector:

r = jQuery matriz de elementos que se escudriñan. (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 declaración del selector debe devolver verdadero para incluirlo en sus resultados coincidentes.

m [2] = nodeName o * que buscamos (a la izquierda de dos puntos).

m [3] = param pasado al selector: (param). Típicamente un número de índice, como en : n-ésimo tipo (5) , o una cadena, como en : color (azul) .

Answer 7

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 entra en la categoría "bucle manual" ...

$(''div.story span.Quality'').contents().filter(function()
{
  return !/flac/i.test(this.nodeValue);
}).parent().css("background-color", ''yellow'');

Answer 8

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);
    }
);

No solo es insensible a mayúsculas / minúsculas, sino que permite búsquedas potentes como:

• $("p:containsCI(''//bup//b'')") (Coincide con "Arriba" o "Arriba", pero no "arriba", "activación", 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 "stocks", pero solo al comienzo del párrafo (ignorando cualquier espacio en blanco inicial).

Answer 9

Una versión más rápida usando 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());
};

Answer 10

Use el código siguiente para usar ": contains" para encontrar texto ignorando la sensibilidad de 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");
          }              
        });

Puede usar este enlace para obtener más información sobre esto, usar jQuery para buscar texto HTML y mostrar u ocultar en consecuencia

También puede usar este enlace para encontrar el código igonring de caso basado en su versión de jquery, Make jQuery: contains Case-Insensitive

Answer 11

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.