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方法的更多信息，您知道where to look。

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

你可以这样做：

$(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);
});

Answer 4

检查一下：

$('.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);

使用jquery转换html结构

4 个答案: