Помощь в селекторах 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 с идентификатором "content" - мой собственный, я могу получить к нему доступ только через HTML.

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

Спасибо

Answer 1

Вот способ jQuery

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

Вы можете продемонстрировать его здесь http://www.jsfiddle.net/K8WNR/

Answer 2

Не уверен, что вы можете сделать это с помощью jQuery. Но если вы используете сырой JavaScript, вы можете просматривать узлы и проверять их nodeType, где 1 - это элемент, а 3 - текст. Скажем, 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>