jQuery remplacer les chaînes dans plusieurs classes

Question

J'essaie d'utiliser jQuery pour remplacer toutes les occurrences d'une chaîne particulière qui se produit dans une certaine classe. Il existe plusieurs classes de ce type sur la page.

Jusqu'à présent, j'ai le code suivant:

var el = $('div.myclass'); 
if(el != null && el.html() != null) 
{ 
    el.html(el.html().replace(/this/ig, "that")); 
} 

Cela ne fonctionne pas s'il y a plus d'un div avec classe myclass. S'il y a plus d'un div alors le second div est remplacé par le contenu du premier! C'est comme si jQuery effectuait le remplacement sur la première div puis remplaçait toutes les classes de myclass par le résultat.

Quelqu'un sait comment je devrais le faire? Je pense à une sorte de boucle sur toutes les instances de div mychass - mais mon JS est un peu faible.

Answer 1

légèrement différente de la réponse précédente:

$('div.myclass').each(function(i, el) { 
    if($(el).html() != "") { 
    $(el).html($(el).html().replace(/this/ig, "that")); 
    } 
}); 

devrait fonctionner

Answer 2

Je pense que ce que vous cherchez est quelque chose comme ceci:

$('div.myclass').each(function(){ 
    var content = $(this).html(); 
    content = content.replace(/this/ig,'that'); 
    $(this).html(content); 
}); 

(non testé)

Answer 3

Si le contenu de vos éléments .myclass est purement textuel, vous pouvez vous en sortir C'est ça. Mais s'ils contiennent d'autres éléments, votre traitement d'expressions régulières peut changer les valeurs d'attribut par erreur. Ne pas traiter le HTML avec regex. En outre, en écrivant au innerHTML/html(), vous perdriez toutes les données non sérialisables dans tout élément enfant, telles que les valeurs de champs de formulaire, les gestionnaires d'événements et d'autres références JS.

function isTextNode(){ 
    return this.nodeType===3; // Node.TEXT_NODE 
} 

$('div.myclass, div.myclass *').each(function() { 
    $(this).contents().filter(isTextNode).each(function() { 
     this.data= this.data.replace(/this/g, 'that'); 
    }); 
});