Help in jquery selectors

老子叫甜甜 提交于 2019-12-24 21:56:06

问题


Hi please refer the following HTML code:

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

this is the html code which is being generated from admin section of my web application. I can't modify it and also can't change the structure of the above code. it is generating dynamically.

I need to wrap the text content in a html element using jquery wrap() method so that I can put some css on the text content and not on img element.

Note: The div element with id "content" is my own, I can access only this using HTML.

Please help how to do this?

Thanks


回答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/




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



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


来源:https://stackoverflow.com/questions/4084095/help-in-jquery-selectors

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!