Помощь в JQuery селекторы

Question

Привет пожалуйста, обратитесь следующий HTML код:

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

это HTML-код, который генерируется из админ части моего веб-приложения. Я не могу изменить его, а также не могу изменить структуру вышеуказанного кода. он генерирует динамически.

Мне нужно обернуть текстовое содержимое элементом html с помощью метода jquery wrap(), чтобы я мог поместить некоторые css в текстовое содержимое, а не на элемент img.

Примечание: Элемент div с содержимым «id» является моим собственным, я могу получить доступ только к этому с помощью HTML.

Помогите, пожалуйста, как это сделать?

Благодаря

Answer 1

Вот 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

Не уверен, что если вы можете сделать это с помощью JQuery. Но если вы используете необработанный JavaScript, вы можете просмотреть узлы и проверить их nodeType, причем 1 является Element, а 3 - Text. Так сказать f ваш шрифт элемент:

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

Вы могли бы попробовать это ...

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

который будет возвращать это ...

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