/ / Array von JQuery-Selektoren - Jquery, Arrays

Array von JQuery-Selektoren - jquery, arrays

Der Einfachheit halber wollte ich meine JQuery-Selektoren nicht einzeln, sondern aus einem Array referenzieren. Ich wurde zu der Überzeugung gebracht, dass die folgende Logik mich dazu befähigen könnte:

var reference = $(".class");

reference[0].<function>;

Anstatt von:

$reference1 = $("#id1");
$reference2 = $("#id2");
$reference3 = $("#id3");

$reference1.<function>

Alle meine Elemente haben die entsprechende Klasse undwerden in das Array gefüllt (?), aber aus irgendeinem Grund kann ich nicht JQuery-Funktionen aus dem Array auf dieselbe Weise aufrufen, wie ich es mit einem einzigen Selektor tun kann diese?

Antworten:

1 für die Antwort № 1

reference[0] bezieht sich auf ein Element anstelle eines jQuery-Objekts.

Wenn Sie sich auf das erste Objekt beziehen möchten, das einem Selektor entspricht, verwenden Sie .zuerst():

/* This returns a jQuery object. */
reference.first();

Wenn das Objekt den Index n haben soll, verwenden Sie ": eq (n)"in Ihrer Auswahl oder der eq () Methode. Diese sind nullindiziert:

/* This returns a jQuery object. */
$(".class:eq(n)");
/* This returns a jQuery object. */
reference.eq(n);

Sie können ein Element auch "umwickeln", dies ist jedoch nicht idiomatisch:

/* This returns an Element. */
reference[n];
/* This returns a jQuery object. */
$(reference[n]);

Ebenso könnte man verwenden bekommen. Die obigen Methoden sind jedoch vorzuziehen:

/* This returns an Element. */
reference.get(n);
/* This returns a jQuery object. */
$(reference.get(n));

Was bedeutet Umhüllung:

Dies ist unsere Seite:

<!DOCTYPE html>
<html>
<head>
<title>Hey</title>
</head>
<body>
<p>You</p>
<p>!!!</p>
</body>
</html>

Dies erstellt ein jQuery-Objekt mit dem Namen $pWählen Sie die beiden aus <p> Elemente:

/* This returns a jQuery object. */
var $p = $("p");

Dieses Objekt verfügt über alle nützlichen jQuery-Methoden, die wir lieben:

$p.css("color", "purple"); /* this colors all paragraphs purple */

Wie gesagt, wir können den zweiten (oder ersten) Absatz mit auswählen .eq():

/* This returns a jQuery object. */
$p.eq(1); /* this selects the second paragraph (because indices start at 0) */

Oder wir könnten es so machen, wie Sie es wollten:

/* This returns an Element. */
$p[1];

Dies gibt uns jedoch ein einfaches altes Element und kein jQuery-Objekt. Wenn wir jedoch die jQuery-Funktion anwenden, erhalten wir ein jQuery-Objekt zurück und können alle unsere beliebten jQuery-Methoden verwenden:

$($p[1]).text("???");

Bewirbt sich $ wieder zu einem Element ist das, was ich Umverpackung nannte.


2 für die Antwort № 2

Ihr erster Beispielcode funktioniert nicht als reference[0] ruft das zugrunde liegende DOM-Element ab, und diese verfügen nicht über jQuery-Methoden. Daher müssen Sie einen Fehler erhalten.

.eq(index) kann verwendet werden

Reduzieren Sie den Satz übereinstimmender Elemente auf den am angegebenen Index angegebenen.

Ändern Sie Ihren Code als

var reference = $(".class");
reference.eq(0).fn()