Help In Jquery Selectors

Hi please refer the following HTML code:

Solution 1:

Here is the jQuery way

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

You can Demo it here http://www.jsfiddle.net/K8WNR/

Solution 2:

Not sure if you can do that with jQuery. But if you use raw JavaScript, you can look through the nodes and check out their nodeType, with 1 being Element and 3 being Text. So say f is your font element:

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.
    }
}

Solution 3:

You could try this ...

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

Which will return this ...

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

Share