it-swarm.com.de

Was ist "Kontext" in der jQuery-Auswahl?

Gibt es einen Unterschied zwischen

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

und

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

?

45
Dims

Es gibt IS ein Unterschied, und es ist NICHT subtil, wie andere glauben.

EDIT: Laien-Beispiel von jedem:

  • Rufen Sie alle blauen Häuser in der Stadt an (Kontext). Wenn Jane dort ist, geben Sie ihren Hut ab.
  • Nennen Sie alle Gebäude in der Stadt (noch kein Kontext). WENN es sich um ein blaues Haus handelt (Kontext hinzufügen) und Jane da ist, geben Sie ihren Hut ab.

Lassen Sie uns die Auswahl aufschlüsseln.

Zuerst haben wir: Kontextauswahl http://api.jquery.com/jQuery/#jQuery-selector-context

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

Dies sagt: benutze einen Selektor im Kontext. http://api.jquery.com/jQuery/#jQuery-selector-context

Während dieses Formular funktioniert, sollte es wirklich sein:

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

OR

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

Dies erfüllt die Anforderung, dass ein Kontextselektor erfüllt ist: "Ein DOM-Element, ein Dokument oder eine jQuery, die als Kontext verwendet werden sollen".

Dies besagt: Verwenden Sie den Kontext, um den Selektor darin zu finden. Ein Äquivalent wäre:

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

Welches ist, was intern passiert. Finden '#storePreferences' und darin finden alle 'input.current_title' passende Elemente.


Dann haben wir: Descendant Selector

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

Dies ist ein Descendant Selector ("Vorfahr Nachkomme") http://api.jquery.com/descendant-selector/ der besagt: find all the input.current_title Elemente innerhalb des #storePreferences Element. DIESES IS WO ES SCHWIERIG WIRD! - DAS IST GENAU DAS, WAS ES MACHT -

findet ALLE input.current_title (irgendwo), dann findet die INNERHALB des #storePreferences Element.

Daher stoßen wir auf jQuerys 'Sizzle-Selektor von rechts nach links - so findet er anfangs MEHR (möglicherweise) als nötig, was ein Leistungstreffer/-problem sein könnte.

So ist die Form von:

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

würde am ehesten besser abschneiden als die Descendant-Version.

57

Gibt es einen Unterschied zwischen $('input.current_title', '#storePreferences').prop('disabled', false); und $('#storePreferences input.current_title').prop('disabled', false);?

Ja, aber es ist subtil

Der Unterschied besteht darin, wie die Elemente ausgewählt werden.

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

ist äquivalent zu1:

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

aber ist nicht äquivalent zu:

$('#storePreferences input.current_title');

obwohl die gleichen Elemente betroffen sein werden.

Der Grund, warum sie nicht gleich sind, ist, dass mit find der Kontext zu #storePreferences Zurückgegeben werden kann, wenn end heißt.

1: Zeilen 194-202 in der jQuery v1.9.1-Quelle
// 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 );
}

im Zusammenhang mit Ihrer Frage werden dieselben Elemente geändert, sodass es keinen Unterschied in der Funktionalität gibt. Es ist jedoch wichtig, die umfassenderen Auswirkungen der von Ihnen verwendeten Selektoren zu berücksichtigen.

33
zzzzBov