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

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

WBOY
Libérer: 2016-05-16 16:38:30
original
1365 Les gens l'ont consulté

replaceWith est facile à utiliser

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

La page a la balise p suivante

Remplacez toutes les balises p par "##"

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

Résultat après exécution :

Remplacer les balises

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

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

Résultats

C'est le remplacement !

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 profiter de cette fonctionnalité, par exemple, ajouter une balise i au texte que vous devez traduire, puis parcourir la traduction et la remplacer.

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

Nous devons traduire le texte de la balise i sur la page. Les balises i sur la page sont Apple et ordinateur. Nous avons donc besoin d'une bibliothèque de traduction :

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

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

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

Effet après exécution :

Effet de page :

É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