Изменение узлов с помощью jquery find

Question

Я получаю данные HTML из приложения, но мне нужно изменить некоторые узлы, чтобы сделать их совместимыми с новым приложением, например изменить <b> в <strong>,

Я написал этот пример http://jsfiddle.net/daYL4/9/.

Что я хотел сделать, это проверить все узлы divи конвертировать их при необходимости, но, похоже, это не работает должным образом. Когда я нажимаю кнопку, только div начальные дети изменены. Если я нажимаю кнопку еще раз, дети меняются, и т. Д. Я не понимаю, почему она не меняет все узлы при первом нажатии.

Вот что я получаю:

<font>span
    <b>bbb<i>iii</i>bbb<i>iii</i>bbb<i>i<font>font</font>ii</i></b>
</font>

И вот что я хочу при нажатии на кнопку:

<span>span
        <strong>bbb<em>iii</em>bbb<em>iii</em>bbb<em>i<span>font</span>ii</em></strong>
    </span>

У кого-нибудь есть ключ?

Answer 1

Что-то вроде этого?

 //create a jquery function for ease of operation.
$.fn.transform = function(replacer){
    replacer = replacer || {};
    this.find('*').each(function(){
        var newNode = replacer[this.nodeName];
        if(this.nodeType == 1 && newNode){//check for element node and if it is one in the replacement object
            $(this).contents().unwrap().wrapAll(newNode); // take the contents out of the element unwrap it and then wrap all of the contents by creating a new object based on the replacement object value.
        }
    });
    return this; //return for chaining
}

$(document).ready(function() {
    $("button").click(function() {

        //create an object with key value pair of replacement required
        var repl = {
            'B' :'<strong/>',
            'I' : '<em/>',
            'FONT': '<span/>'
        }
        $("div").transform(repl);
    });    
});

скрипка

• Развертка ()
• заворачивать()
• wrapAll ()