web-dev-qa-db-fra.com

Qu'est-ce que le «contexte» dans le sélecteur jQuery?

Y a-t-il une différence entre

$('input.current_title', '#storePreferences').prop('disabled', false);

et

$('#storePreferences input.current_title').prop('disabled', false);

?

javascriptjqueryjquery-selectors
45
Dims

Il y a IS une différence, et ce n'est PAS subtil comme d'autres le croient.

EDIT: Exemple de Layman pour chacun:

  • Appelez toutes les maisons bleues de la ville (contexte), si Jane est là, retirez son chapeau.
  • Appelez tous les bâtiments de la ville (pas encore de contexte). SI c'est une maison bleue (ajouter du contexte) et Jane est là, enlevez son chapeau.

Décomposons ce qu'il sélectionne.

Nous avons d'abord: Sélecteur de contexte http://api.jquery.com/jQuery/#jQuery-selector-context

$('input.current_title', '#storePreferences').prop('disabled', false);

Cela dit: utilisez un sélecteur en contexte. http://api.jquery.com/jQuery/#jQuery-selector-context

Bien que cette forme puisse fonctionner, elle devrait vraiment être:

$('input.current_title', $('#storePreferences')).prop('disabled', false);

OR

var myContext = $('#storePreferences');
$('input.current_title', myContext).prop('disabled', false);

Cela répond à l'exigence de respect d'un sélecteur de contexte: "Un élément DOM, un document ou une requête jQuery à utiliser comme contexte".

Cela dit: en utilisant le contexte, trouver à l'intérieur que le sélecteur. Un équivalent serait:

$('#storePreferences').find('input.current_title').prop('disabled', false);

C'est ce qui se passe en interne. Trouver '#storePreferences' et dans lequel trouver tous les 'input.current_title' éléments correspondants.

Ensuite, nous avons: Sélecteur de descendants 

$('#storePreferences input.current_title').prop('disabled', false);

Il s'agit d'un Sélecteur de Descendant ("descendant d'ancêtre") http://api.jquery.com/descendant-selector/ qui dit: trouver tous les input.current_title éléments à l'intérieur du #storePreferences élément. CECI IS O IT IL OBTIENT RICHE! - c'est EXACTEMENT ce qu'il fait -

trouve TOUS les input.current_title (n'importe où), puis trouve ceux DANS le #storePreferences élément.

Ainsi, nous rencontrons le sélecteur Sizzle de droite à gauche de jQuerys - donc il trouve initialement PLUS (potentiellement) que ce dont il a besoin, ce qui pourrait être un problème/problème de performance.

Ainsi la forme de:

$('#storePreferences').find('input.current_title').prop('disabled', false);

fonctionnerait mieux que la version Descendant la plus probable.

57
Mark Schultheiss

Y a-t-il une différence entre $('input.current_title', '#storePreferences').prop('disabled', false); et $('#storePreferences input.current_title').prop('disabled', false);?

Oui, mais c'est subtil

La différence réside dans la façon dont les éléments sont sélectionnés.

$('input.current_title', '#storePreferences');

est équivalent à1:

$('#storePreferences').find('input.current_title');

mais n'est pas pas équivalent à:

$('#storePreferences input.current_title');

même si les mêmes éléments seront affectés.

La raison pour laquelle ils ne sont pas les mêmes est que l'utilisation de find permet au contexte d'être retourné à #storePreferences lorsque end est appelé.

1: lignes 194-202 dans la source jQuery v1.9.1
// HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
    return ( context || rootjQuery ).find( selector );

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
    return this.constructor( context ).find( selector );
}

dans le contexte de votre question, les mêmes éléments seront modifiés, il n'y a donc pas de différence de fonctionnalité, mais il est important d'être conscient des implications plus larges des sélecteurs que vous utilisez.

33
zzzzBov