Aide dans les sélecteurs jquery

Question

Salut s'il vous plaît consulter le code HTML suivant:

<div id="content"> 
    <p> 
     <font size='2'> 
     <img src="something.jpg" width="500" height="500" /> 
     this is the text content. this is the text content. this is the text content... 
     </font> 
    </p> 
</div> 

c'est le code html qui est générée à partir de la section d'administration de mon application Web. Je ne peux pas le modifier et ne peux pas non plus changer la structure du code ci-dessus. il génère dynamiquement.

J'ai besoin d'envelopper le contenu du texte dans un élément html en utilisant la méthode jquery wrap() afin que je puisse mettre du CSS sur le contenu du texte et non sur l'élément img.

Note: L'élément div avec l'id "content" est le mien, je ne peux y accéder qu'en utilisant le HTML.

S'il vous plaît aidez comment faire ceci?

Merci

Answer 1

Voici la façon dont jQuery

$("p > font") 
    .contents() 
    .filter(function() { 
    return this.nodeType == 3; 
    }).wrap('<span style="color:#FF0000" />'); 

You can Demo it herehttp://www.jsfiddle.net/K8WNR/

Answer 2

Je ne sais pas si vous pouvez le faire avec jQuery. Mais si vous utilisez JavaScript brut, vous pouvez regarder à travers les nœuds et vérifier leur nodeType, avec 1 étant élément et 3 étant texte. Donc, dire f est votre élément de la police:

for (var i=0; i < f.childNodes.length; i++) { 
    if (f.childNodes[i].nodeType == 3) { 
     var text = f.nodeValue; 
     // Remove the text node, insert a new span node and plug in the text. 
    } 
} 

Answer 3

Vous pouvez essayer ...

$(function() { 
    $("#content").find("p > font").each(function() { 
    var $this = $(this).wrapInner(document.createElement("div")); 
    var $img = $this.find('img').remove(); 
    $this.prepend($img); 
    }) 
}); 

qui retournera ce ...

<p> 
    <img height="500" width="500" src="something.jpg"> 
    <div> 
     this is the text content. this is the text content. this is the text content... 
    </div> 
</p>