2

問題があり、この (比較的) 単純な関数を解決する方法がわかりません。私が達成したいことは次のとおりです。私のクライアントは、この出力を提供する CMS を使用しています。

<div class="foldOutEnabled">

    <h2>Title 01</h2>

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 01</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

    <h2>Title 02</h2>

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 02</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

</div>

私がやろうとしているのは、「h2」タグ間のすべての HTML を取得し、これを別の div でラップすることです (jQUery がそれを使用してアコーディオン メニューを作成できるようにします)。これが機能するには、出力がこれになる必要があります。

<div class="foldOutItem">
    <div class="foldOutItemTitle">
        <h2>
            <a href="#"><img class="foldoutArrow" width="17" height="20" alt="" src="../images/footer-arrow.png">Title 01</a>
        </h2>
    </div>
    <div class="foldOutItemContent">

        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

        <h3>subtitle 01</h3>
        <p>1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tortor ligula, pulvinar eget vestibulum quis, lobortis et quam.</p>

    </div>
</div>

etc...

多くの異なる解決策と方法を試した後、私が到達したのは次のとおりです。

if ($('.foldOutEnabled').length) {

    var newHtml = '<div class="foldOutTitle"><span><a id="foldOutAll" href="#">Alles uitklappen</a></span></div>';

    $('.foldOutEnabled h2, .foldOutEnabled h3, .foldOutEnabled table, .foldOutEnabled p, .foldOutEnabled span').each(function(i) {

        if (this.nodeName == 'H2')
        {
            if (i != 0) { newHtml += '</div></div>'; }
            newHtml += '<div class="foldOutItem"><div class="foldOutItemTitle"><h2><a href="#"><img src="../images/footer-arrow.png" alt="" width="17" height="20" class="foldoutArrow" />' + $(this).html() + '</a></h2></div><div class="foldOutItemContent">';
        } else {
            newHtml += $(this).html();
        }

    });

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

私の意見では、これは改善される可能性がありますが、.html() がすべての html タグを削除することを除いて機能します。そのため、すべての「p」と「h3」、およびコンテンツに含まれるその他のタグはなくなりました。

私の質問ですが、どうすればこれを防ぐことができますか?

4

2 に答える 2

2

これを試して：

jsFiddle デモ

デモでは、変更を視覚化するために新しいクラスに色を付けました。

$('.foldOutEnabled h2').each(function(){
  $(this).nextUntil('h2').andSelf().wrapAll('<div class="foldOutItem" />');
  $(this).nextAll().wrapAll('<div class="foldOutItemContent" />')
    .end().wrap('<div class="foldOutItemTitle" />');
});

http://api.jquery.com/each/
http://api.jquery.com/nextuntil/
http://api.jquery.com/andself/
http://api.jquery.com/wrapall/
http: //api.jquery.com/nextall/
http://api.jquery.com/end/

于 2012-06-21T18:42:30.540 に答える