Beispielanalyse der Verwendung der umgekehrten Einfügungsmethode für die DOM-Baumoperation in jQuery_jquery

Das Beispiel in diesem Artikel beschreibt die umgekehrte Einfügemethode der DOM-Baumoperation in jQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Verwenden Sie die umgekehrte Einfügemethode

Hier fügen wir zunächst den erstellten Inhalt vor dem Element ein und fügen dann dasselbe Element an einer anderen Position im Dokument ein. Im Allgemeinen ist es bei der Bearbeitung von Elementen in jQuery präziser und effizienter, die Verkettungsmethode zu verwenden. Aber wir haben jetzt keine Möglichkeit, dies zu tun, da dies das Ziel von .insertBefore() und der Inhalt von .appendTo() ist. Zu diesem Zeitpunkt kann uns die Verwendung der umgekehrten Einfügemethode bei der Lösung des Problems helfen.

Einfügemethoden wie .insertBefore() und .appendTo() verfügen im Allgemeinen über eine entsprechende Umkehrmethode. Die umgekehrte Methode führt ebenfalls den gleichen Vorgang aus, jedoch sind „Ziel“ und „Inhalt“ vertauscht. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

$('

Hallo

'). appendTo(' #container');

Das Ergebnis ist das gleiche wie der folgende Code:

Code kopieren Der Code lautet wie folgt:

$('#container').append('

Hallo');

Im Folgenden verwenden wir .before() anstelle von .insertBefore(), um den Code zu rekonstruieren, siehe folgenden Code:

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
var $notes = $('

')
.insertBefore('#footer');
$('span.footnote').each(function(index) {
$(dies)
.before('^{' (index 1) '}')
.appendTo($notes)
.wrap('

');
});
});

Methodenrückruf einfügen

Die umgekehrte Einfügemethode kann eine Funktion als Parameter akzeptieren, ähnlich wie die Methoden .attr() und .css(). Die übergebene Funktion wird für jedes Zielelement aufgerufen und gibt den eingefügten HTML-String zurück. Diese Technik kann hier tatsächlich verwendet werden, aber da sie die Wiederholung des gleichen Vorgangs für jede Fußnote erfordert, ist es klarer, eine .each()-Methode zu verwenden.

Jetzt können wir uns mit dem letzten Schritt befassen: Erstellen von Links zu passenden Fußnoten an entsprechenden Stellen im Text und Links in Fußnoten zu Stellen im Text. Dazu sind für jede Fußnote vier Tags erforderlich: zwei Links, einer im Text und einer in der Fußnote, sowie zwei id-Attribute. Da auf diese Weise die an die Methode .before () übergebenen Parameter komplizierter werden, ist es erforderlich, hier eine neue Methode zum Erstellen von Zeichenfolgen zu verwenden.
Im obigen Code verwenden wir den Operator zum Verketten von Zeichenfolgen. Obwohl die Verwendung des Operators kein Problem darstellt,
Wenn Sie zu viele Zeichenfolgen verketten müssen, sieht es unordentlich aus. Daher verwenden wir hier die .join()-Methode des Arrays, um ein größeres Array zu erstellen. Mit anderen Worten: Die folgenden zwei Codezeilen führen zum gleichen Ergebnis.

Code kopieren Der Code lautet wie folgt:

var str = 'a' 'b' 'c';
var str = ['a', 'b', 'c'].join('');

Obwohl dieses Beispiel die Eingabe weiterer Zeichen erfordert, kann die Verwendung der .join()-Methode Verwirrung vermeiden, die durch zu viele zu verbindende Zeichenfolgen verursacht wird. Schauen wir uns noch einmal den Beispielcode an. Der folgende Code zeigt den Prozess der Verwendung von .join() zum Erstellen einer Zeichenfolge.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer'); $('span.footnote').each(function(index) { $ (dies)
.before([
'^{', Index 1,
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

Notez que puisque chaque élément du tableau effectuera des opérations séparément, il n'est pas nécessaire de mettre l'index 1 entre parenthèses. En utilisant cette technique, vous pouvez ajouter un lien au bas de la page et une valeur d'identifiant unique pour la balise de pied de page. En même temps, dans la méthode suivante, l'attribut id correspondant doit également être ajouté à l'élément

afin que le lien ait une cible correspondante. Voir le code suivant :
.

Copier le code Le code est le suivant :

$(document).ready(function() {
var $notes = $('

') .insertBefore('#footer'); $('span.footnote').each(function(index) { $ (ce)
.avant([
'',
'^{', indice 1,
'}'
].join(''))
.appendTo($notes)
.wrap('

');
});
});

Avec ces balises ajoutées, chaque balise de note de bas de page aura un lien vers la note de bas de page correspondante au bas de la page. Il ne reste plus qu'à créer un lien vers son contexte dans la note de bas de page. Pour ce faire, vous pouvez utiliser .append(), la méthode inverse de .appendTo(), voir le code suivant :

Copier le code Le code est le suivant :

$(document).ready(function() {
var $notes = $('

'"id="context-', indice 1,
'"classe = "context__>',
'^{', indice 1,
'}'
].join(''))
.appendTo($notes)
.append([
' (');
});
});

Notez que le href pointe ici vers l'identifiant dans la balise de note de bas de page. Dans les résultats en cours, vous pouvez voir une note de bas de page contenant le nouveau lien.

J'espère que cet article sera utile à la programmation jQuery de chacun.