2

これから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()たが、運がありません。助けてください。

4

4 に答える 4

2

これを行うには多くの方法があります。これが最初に頭に浮かんだものです：

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メソッドの詳細については、どこを見ればよいかを知っています。

于 2013-02-25T10:31:56.257 に答える
0

あなたはこのようにそれを行うことができます：

$(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);
});
于 2013-02-25T10:30:16.960 に答える
0

これをチェックして：

$('.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);
于 2013-02-25T10:31:30.840 に答える
0

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();
于 2013-02-25T10:24:04.060 に答える