Maison > interface Web > js tutoriel > Exemple d'utilisation de la fonction de remplacement de balise jQuery replaceWith()

Exemple d'utilisation de la fonction de remplacement de balise jQuery replaceWith()

巴扎黑
Libérer: 2017-06-24 14:19:35
original
1618 Les gens l'ont consulté

Cet article présente principalement les exemples d'utilisation de jQuery remplacement de balisefonctionreplaceWith(). Utilisez replaceWith pour remplacer les balises dans les modèles, et cela peut également l'être. implémenté un site Web multilingue, les amis dans le besoin peuvent se référer à

replaceWith est simple à utiliser

Dans jQuery, il existe une puissante fonction de remplacement replaceWith(), C'est très simple à utiliser, comme :

La page a les balises p suivantes

Remplacez toutes les balises p par "## "


$('p').replaceWith('##');
Copier après la connexion

Résultat après exécution :

Étiquette de remplacement

En utilisant ce replaceWith, nous pouvons Remplacer toutes les balises p par des balises b, le contenu reste inchangé :


$('p').each(function(){
    $(this).replaceWith(&#39;<b>&#39;+$(this).html()+&#39;</b>&#39;);
});
Copier après la connexion

Le résultat

Remplacez ceci. Compris !

Les sites Web multilingues peuvent être facilement complétés grâce à cette fonction

Si vous développez un site Web multilingue, vous pouvez même utiliser cette fonctionnalité, par exemple, lorsque vous avez besoin d'une traduction Ajoutez une balise i au texte, puis effectuez le remplacement de la traduction.

Supposons que la structure de la page dom soit la suivante :

Nous devons traduire le texte de la balise i sur la page. la page est Apple, ordinateur. Nous avons donc besoin d'une bibliothèque de traduction pour la mise en œuvre :


var translate = {
    &#39;苹果&#39; : &#39;apple&#39;,
    &#39;电脑&#39; : &#39;PC&#39;
};
Copier après la connexion

Ensuite, je peux effectuer un remplacement de traduction comme celui-ci


$(&#39;i&#39;).each(function(){
    $(this).replaceWith(translate[$(this).html()]);
});
Copier après la connexion

Effet après exécution :

Effet page :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal