Discussion :

[popo]

Bonjour,

J'ai trouvé sur internet plusieurs bouts de code pour rendre le pseudo sélecteur "contains" non sensible à la casse et notamment ceux là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$.extend($.expr[":"], {
"containsIN": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
(function() {
    jQuery.expr[':'].containsNC =  function(elem, index, match) {
        return (elem.textContent || elem.innerText || jQuery(elem).text() || '').toLowerCase().indexOf((match[3] || '').toLowerCase()) >= 0;
    }
}(jQuery))

A moins que je n'ai pas été attentif, ou qu'il y a un détail qui m'a échappé, j'ai constaté que :
- le paramètre array de la premier version ne semble pas nécessaire
- le test sur jQuery(elem).text() de la seconde version ne semble pas nécessaire

Au final je me suis dit que je pouvais enlever le paramètre array mais que je devais conserver le test et j'ai donc le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$.extend($.expr[":"], {
    "containsIgnoreCase": function (elem, i, match) {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

Mais j'aime bien comprendre ce que je fais et là ça semble fonctionner mais je ne saurait décrire le fonctionnement.
Ai-je besoin du paramètre array ?
Le test sur $(elem).text() est-il utile (car je ne vois pas de différence) ?
A quoi correspondent les paramètres elem, i, match et array ?

Merci.

[Showie]

Salut,

effectivement array ne sert a rien ici.

la méthode extend étend un objet en lui ajoutant les propriétés d un autre objet

ici elle ajoute à $.expr[":"] un selecteur "containsIgnoreCase" qui prend comme valeur le test ci dessous

du texte suivant
soit
elem.textContent
ou si il est vide ou faux
elem.innerText
ou si il est vide ou faux
$(elem).text()
ou si il est vide ou faux
une chaine vide (pour ne pas planter)
le met en minuscules

met le mot clè passé à la fonction en minuscules (index 3 du tableau match)
puis cherche sa position dans le texte trouvé précédemment

si la position est supérieur ou égale à 0 elle renvoi TRUE

Le test sur $(elem).text() est-il utile (car je ne vois pas de différence) ?

oui dans certain cas mais il arrive quand le textContent et l innerText de l élément sont vide.

A quoi correspondent les paramètres elem, i, match et array ?

- elem correspond à l element du dom sur lequel jquery fait son test
- i à l indice de l élément dans le tableau de résultat en théorie il vaut toujours 0 sauf si code malformaté
- match tableau des paramètres passé à la fonction selector de jquery

[popo]

Je te remercie pour ta réponse.
Cependant, elle ne répond qu'à une seule de mes questions (celle de la pertinence de array).

Pertinence de $(elem).text (non présente à l'origine dans l'option que j'ai choisi de modifier) ?

D'où sorte les arguments de la fonction ?
D'ailleurs maintenant que tu en parles, j'ai vu que l'indice 3 contenait le texte que je cherche à matcher, mais d'où sortent les valeurs de match ?

[Showie]

Bon en cherchant à préciser ma réponse j'ai découvert que array pouvait être utile et que j'avais mal compris la valeur de i


Voici la traduction rapide de ce que j'ai trouvé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
$.expr[':'].test = function(obj, index, meta, stack){
    /* obj - Objet du DOM
       index - Index courant de la boucle sur les elements de la pile
       meta - Meta données du sélecteur
       stack - Pile de tous les elements sur lesquels on peut boucler
   
       Return true Pour inclure l element courant
       Return false Pour exclure l element courant
    */
};
//Les méta données se présentent sous la forme d'un tableau d information sur le selecteur
 
$('a:test(argument)');
//Voici les meta données correspondant a cet appel
[
    ':test(argument)', // Selecteur complet
    'test',            // Seulement le selecteur
    '',                // Les caractères d encadrement utilisés
    'argument'         // les paramètres
]
 
$('a:test("arg1, arg2")');
//Voici les meta données correspondant a cet appel
[
    ':test('arg1, arg2')', // Selecteur complet
    'test',                // Seulement le selecteur
    '"',                   // Les caractères d encadrement utilisés
    'arg1, arg2'           // les paramètres
]
 
On vois bien que c'est le 4eme élément du tableau qui nous intéresse (meta[3]) et qui contient nos paramètres.

Source en anglais

concernant l usage de $(elem).text();
c'est dans le cas ou le navigateur ne reconnait pas ni textContent ni innerText à par une vieille version de <4 de Firefox pour Android je ne pense pas qu'il y est une grande utilité à aller jusqu'à là dans la compatibilité.