jquery - 使用jquery转换html结构

Question

任何想法如何从这里转换 html 结构：

<div class="menu">
    <ul>
        <li>
            <a href="#">Fruit A</a>
            <ul>
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>                              
            </ul>
        </li>
        <li>
            <a href="#">Fruit B</a>
            <ul>
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>                             
            </ul>
        </li>
    </ul>
</div>

使用 jQuery 进行以下操作：

<div class="menu">
    <div>
        <h3><a href="#">Fruit A</a></h3>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>                             
        </ul>
    </div>
    <div>
        <h3><a href="#">Fruit B</a></h3>
        <ul>
            <li><a href="#">Category 1</a></li>
            <li><a href="#">Category 2</a></li>                            
        </ul>
    </div>
</div>

我试过了，.replaceWith()但没有运气。请帮忙。

Answer 1

有很多方法可以做到这一点。这是第一个想到的：

var $menu = $("div.menu"),
    $ul = $menu.children("ul").detach();
$ul.children().each(function() {
    $("<div />").append($(this).children()).appendTo($menu);
});
$("div.menu > div > a").wrap("<h3 />");

也就是说，首先从菜单 div 中分离顶级列表。然后遍历该列表的 li 元素，将每个元素的内容附加到一个新的 div 中，并将结果附加到菜单中。在 h3 标记中包装标题锚似乎作为最后的单独操作更简单。

演示：http: //jsbin.com/uwohih/1/edit

有关我使用过的 jQuery 方法的更多信息，您知道在哪里查找。

Answer 2

LIVE DEMO

$('.menu > ul > li').each(function(){
  $(this).children('a').wrap('<h3/>');
  $(this).parent().after('<div>'+ this.innerHTML +'</div>');
}).closest('ul').remove();

---

LIVE DEMO

$('.menu > ul > li').each(function(){
  $(this).children('a').wrap('<h3/>').closest('ul').after('<div>'+ this.innerHTML +'</div>');
}).closest('ul').remove();

Answer 3

检查这个：

$('.menu > ul > li > a').each(function(){
    $(this).wrap('<h3></h3>');
});

var arr = [];
$('.menu ul li').each(function(){
    arr.push($(this).html());
}

var newhtml = '';

for(var x in arr){
    newhtml += '<div>' + x + '</div>';
}
$('.menu').html(newhtml);

Answer 4

你可以这样做：

$(function() {
    var     menu = $('.menu'),
        newHtml = '';

    menu.children('ul li').each(function() {
        var     el = $(this);

        el.children('a').wrap('<h3></h3>');

        newHtml += '<div>'+el.html()+'</div>';
    });

    menu.html(newHtml);
});