1

wordpressブログのカスタムページを書いています。多くのコンテンツが PHP によってオンザフライで挿入されます。jQuery で動的に作成された html タグにいくつかの CSS クラスを追加する必要がありました。私はこれで立ち往生しています...

ユーザーがこのワードプレスページで作成するこれらの「繰り返しビデオブロック」をdivでラップするにはどうすればよいですか?

いくつかの注意: div.entry-content 内のすべての要素のクラスは「3」です。クラス '1' & '2' は要素固有のクラスです。

<div class="canvas">
<div class="entry-content">

    <p class="1 3">Title-1</p>
    <div class="2 3">_____</div>
    <p class="3">Video Here</p> 
    <!- End of first "repeating video-block" -->

    <p class="1 3">Title-2</p>
    <div class="2 3">_____</div>
    <p class="3">Video Here</p>

    <p class="1 3">Title-3</p>
    <div class="2 3">_____</div>
    <p class="3">Video Here</p>

</div>
</div>

これは、私がそれを機能させるのと同じくらい近いです。http://jsfiddle.net/djfrsn/mq5ww/2/

var above      = $('.2').prev();
var below      = $('.2').after();
var videoBlock = '<div></div>';
$(below).addBack().wrapAll(videoBlock);

これまでのところ、私のリソースは @ jQuery Web サイトの DOM トラバーサル ドキュメントと、このスタック オーバーフロー ポスト ( jQuery How to wrap div around multiple of the same class elements ) でした。

ここに私の望ましい出力があります：

<div class="canvas">
<div class="entry-content">

    <div class="vid-block">
        <p class="1 3">Title-1</p>
        <div class="2 3">_____</div>
        <p class="3">Video Here</p> 
    </div> <!- End of first "repeating video-block" -->

    <div class="vid-block">
        <p class="1 3">Title-2</p>
        <div class="2 3">_____</div>
        <p class="3">Video Here</p> 
    </div>

    <div class="vid-block">
        <p class="1 3">Title-3</p>
        <div class="2 3">_____</div>
        <p class="3">Video Here</p> 
    </div>

</div>
</div>
4

1 に答える 1

1

これはあなたが望むことをするはずです。

http://jsfiddle.net/mq5ww/4/

$(".1").each(function(){
    $(this).nextUntil(".1").addBack().wrapAll("<div class='wrapper'>");
});
于 2013-10-20T20:16:48.900 に答える