Exemple d'analyse de l'utilisation de la méthode d'insertion inverse pour le fonctionnement de l'arborescence DOM dans jQuery_jquery

L'exemple de cet article décrit la méthode d'insertion inverse de l'opération de l'arborescence DOM dans jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Utiliser la méthode d'insertion inversée

Ici, nous insérons d'abord le contenu créé devant l'élément, puis insérons le même élément à une autre position dans le document. Généralement, lors de la manipulation d'éléments dans jQuery, il est plus concis et efficace d'utiliser la méthode de concaténation. Mais nous n'avons aucun moyen de le faire maintenant, car c'est la cible de .insertBefore() et le contenu de .appendTo(). À l’heure actuelle, l’utilisation de la méthode d’insertion inversée peut nous aider à résoudre le problème.

Les méthodes d'insertion comme .insertBefore() et .appendTo() ont généralement une méthode inverse correspondante. La méthode inverse effectue également la même opération, mais la « cible » et le « contenu » sont inversés. Par exemple :

Copier le code Le code est le suivant :

$('

Bonjour

'). appendTo(' #conteneur');

Le résultat est le même que le code suivant :

Copier le code Le code est le suivant :

$('#container').append('

Bonjour');

Ci-dessous nous utiliserons .before() au lieu de .insertBefore() pour reconstruire le code, 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)
.before('^{' (index 1) '}')
.appendTo($notes)
.wrap('

');
});
});

Insérer un rappel de méthode

La méthode d'insertion inversée peut accepter une fonction comme paramètre, similaire aux méthodes .attr() et .css(). La fonction transmise sera appelée pour chaque élément cible et renverra la chaîne HTML insérée. Cette technique peut effectivement être utilisée ici, mais comme elle nécessite de répéter la même opération pour chaque note de bas de page, il est plus clair d'utiliser une méthode .each().

Maintenant, nous pouvons envisager la dernière étape : créer des liens vers des notes de bas de page correspondantes aux emplacements correspondants dans le texte et des liens dans les notes de bas de page vers des emplacements dans le texte. Pour ce faire, chaque note de bas de page nécessite quatre balises : deux liens, un dans le texte et un dans la note de bas de page et deux attributs id ; Parce que de cette façon, les paramètres passés à la méthode .before() deviendront compliqués, il est donc nécessaire d'utiliser ici une nouvelle méthode de création de chaînes.
Dans le code ci-dessus, nous utilisons l'opérateur pour concaténer des chaînes. Bien qu'il n'y ait aucun problème à utiliser l'opérateur,
Si vous avez trop de chaînes à concaténer, cela semblera compliqué. Nous utilisons donc ici la méthode .join() du tableau pour construire un tableau plus grand. Autrement dit, les deux lignes de code suivantes ont le même résultat.

Copier le code Le code est le suivant :

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

Bien que cet exemple nécessite la saisie de plus de caractères, l'utilisation de la méthode .join() peut éviter toute confusion causée par un trop grand nombre de chaînes à épisser. Examinons à nouveau l'exemple de code. Le code suivant est le processus d'utilisation de .join() pour créer une chaîne.

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('

');
});
});

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.