Discussion :

[SpaceFrog]

Je cherche a comprendre le comportement de Jquery sur des sélecteurs multiples, en particulier lorsque l'on lui passe des objets ...

Ce que je trouve sur la doc JQuery concerne la syntaxe string séparé par des virgules;

Code :

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

$('.foo, .bar, #toc')

la définition officielle Selects the combined results of all the specified selectors.

Ce qui fonctionne ici https://jsfiddle.net/rbjof052/4/

Du coup je tente une approche en lui passant des objets https://jsfiddle.net/rbjof052/6/
et là c'est le drame

Et il en découle un comportement d'héritage que je ne m'explique pas ...
https://jsfiddle.net/rbjof052/7/
Il a l'air de combiner le selecteur string et l'objet et appliquer une notion de parent ? vu qu'il n'applique le css que sur les descandant .teste de #toc ??


et si je pousse le raisonnement plus loin,
https://jsfiddle.net/rbjof052/8/
il devrait dasn ce cas soit colorier les deux .test enfant des contextes passés,
soit ne rien colorer du tout car un .test ne peut pas être enfant des deux divs en même temps ...

Quelle est là logique ?

De même si je lui passe deux objets, peu importe l'ordre du coup lequel est le contexte ???

[SpaceFrog]

Voici en fait là réponse à la question

$(expr, context)
Est juste un équivalent de :
$(context).find(expr)


ce qui n'est pas tout à fait vrai au vu du fait qu'en inversant les arguments dans le cas du div qui contient le .test, je ne devrais pas avoir le même résulat en mettant le .text en contexte.
Il s'agit plutot d'une intersection

[SpaceFrog]

Mais du coup je ne saisi pas la subtilité

Code :

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

1
2
3
4
$obj1=$('#toc');
$($obj1,'.test').css({'color': 'red'});
$($('#toc'),'.test').css({'color': 'red'});// donne le même résultat
$('#toc','.test').css({'color': 'red'});// ne donne pas le même résultat

quelle différence y'a-t-il

Code :

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

1
2
console.log($($('#toc')))
console.log($('#toc'))

me retourne la même chose ...

[Toufik83]

Code :

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

1
2
3
4
 
<div class="foo"><div class="test">A</div></div>
<div class="bar"><div class="test">B</div></div>
<div id="toc"><div class="test">C</div></div>

pour la couleur, je crois que l'ordre des éléments est important, vu que ".test" vient AVANT ".bar" et "#toc" si on fait :

Code :

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

1
2
3
 
var toc=$('#toc'), bar=$('.bar'),test=$(".test");
$(test, bar,toc).css({'color': 'red'}); //suivons cette ordre le résultat est bon.

le résultat est correcte, par contre si on fait

Code :

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

1
2
 
$(bar,toc,test).css() ou $(toc,bar,test).css() là le résultat n'est pas correcte.

[SpaceFrog]

Code :

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

$(bar,toc,test).css() ou $(toc,bar,test).css() là le résultat n'est pas correcte.

Non car en tout état de cause le troisième argument n'est jamais pris en compte !

[Watilin]

Tout ça me paraît être du comportement bien documenté. L’important c’est de déterminer avec quelle signature la fonction jQuery est appelée. Sachant que toutes les signatures documentées ont au plus deux arguments, tout argument supplémentaire est, par conséquent, toujours ignoré.

Un premier cas notable est la signature jQuery( selection ) où selection est un objet jQuery. Dans ce cas, la doc explique que l’objet sera cloné, autrement dit un nouvel objet jQuery sera retourné, contenant les mêmes éléments.

(Note : sous Firefox j’avais l’impression que l’objet cloné n’était pas un objet jQuery, car la console l’affiche comme un tableau ; en réalité la seule différence est que l’objet original a une propriété prevObject et le clone n’en a pas. Du coup le clone n’a que des propriétés numériques ainsi que length, et du coup la console le fait apparaître comme un array.)

Autrement, si tu commences par lui passer une chaîne, il va d’abord déterminer si c’est du HTML ou pas ; sinon il considère que c’est un sélecteur CSS. (dans la version 3.1.1, on peut voir ça à partir de la ligne 2971).

Si, donc, il reconnaît un sélecteur CSS comme premier argument, alors le second argument, s’il est présent, est obligatoirement un context, et ce context peut être un élément DOM, l’objet document, ou un objet jQuery. La doc ne le dit pas mais ça peut également être une chaîne, elle sera alors traitée comme un sélecteur CSS. Dans tous les cas l’appel se comporte comme tu l’as dit : comme un équivalent de $(context).find(expr).