0

Drupalで生成された投稿テーブルがあります：

<div id="row1">text content</div>
<div id="row2">text content</div>
<div id="row3">video content</div>
<div id="row4">video content</div>
<div id="row5">video content</div>

行は変更されますが、1つの3つのビデオ行を変更する必要があります。つまり、IDなしでこれらの行をターゲットにし、行に特定のクラスのラッパーをそれぞれ追加してから、cssで外観を設定します（ video2とvideo3のタイトルを削除して、3つのビデオが含まれる1つのビデオ投稿に手動でマージします。drupalエンジンではそれを実行できません）

これに必要なものは次のとおりです。

<div id="row1">text content</div>
<div id="row2">text content</div>
<div id="row3"><div class="video1">video content</div></div>
<div id="row4"><div class="video2">video content</div></div>
<div id="row5"><div class="video3">video content</div></div>

（「ビデオコンテンツ」は、日付コンテナ、記事コンテンツ、投稿フッターなど、3つの異なる名前のdivです。これらすべてにラッパーを配置する必要があります）

私はjqueryでこれを解決しようとしましたが、管理できません、誰かがこれに対する解決策を持っていますか？

編集：

わかりました、全部お見せします。:)

ページ1：

<div id="row1">
<div class="date_container">(date divs)</div>
<div class="article_content">(article post's text, image, whatever)</div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

<div id="row2">
<div class="date_container">(date divs)</div>
<div class="article_content">(article post's text, image, whatever)</div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

<div id="row3"> (video1)
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

<div id="row4"> (video2)
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

<div id="row5"> (video3)
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

2ページ：

<div id="row1">
<div class="date_container">(date divs)</div>
<div class="article_content">(article post's text, image, whatever)</div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

<div id="row2"> (video1)
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

<div id="row3"> (video2)
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

<div id="row4"> (video3)
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

<div id="row5">
<div class="date_container">(date divs)</div>
<div class="article_content">(article post's text, image, whatever)</div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>

だから、問題：

1：各ビデオのビデオコンテナには、「article_content」や「video_image」などの同じクラスがあります。

2：行はページごとに変わるため、最初のページの「row3」はビデオで、2番目のページはテキスト記事です。基本的に、すべてのページに5行が固定されており、コンテンツは動的に入力されます。

jqueryを使用して、「video_image」クラスをターゲットにする方法があると思います。これは、ページ行のビデオコンテンツを指している唯一のものであり、「video_image」の上のすべてを「video1」というdivにラップすることができます。もう1つのステップは、1、2、および3のビデオブロックにカウントを追加することです。

編集2：

目標は次のとおりです。

<div id="row2"> (video1)
<div class="video1">
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>
</div>

<div id="row3"> (video2)
<div class="video2">
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>
</div>

<div id="row4"> (video3)
<div class="video3">
<div class="date_container">(date divs)</div>
<div class="article_content"><div class="video_image"></div></div>
<div class="post_nid">(article footer, with author, etc)</div>
</div>
</div>

または、videoXクラスが次のような行に移動する場合

<div id="row4" class="video3">...</div>

それは私にとっても良いことですが、前に述べたように、row4はサイトの2ページ目のrow1にすることができます。

4

2 に答える 2

1

更新された情報を考慮して、私は提案します：

$('.video_image').each(function(i,el){
    $(el).wrap('<div />').parent().attr('class','video' + i);
});​

JSフィドルデモ。

$('.video_image').parent().html(
    function(i,h){
        return '<div class="video' + i + '">' + h + '</div>';
    });​

JSフィドルデモ。

次のバージョンは、最初の要素にanidを付けてから、そのすべての内部htmlを（Nは明らかに数値）で別の要素にラップしdivますvideoN。

$('.video_image').closest('div[id]').html(function(i,h){
    return '<div class="video' + i + '">' + h + '</div>';
});​

JSフィドルデモ。

参照：

于 2012-10-21T16:11:15.637 に答える
0

$('#row3').html($('<div class="video3">').html($('#row3').html()));

そのようなものですが、私はいくつかの弱点をチェックする必要があります

編集：

最初の2行をスキップする必要がある場合：

  $('div').each ( function(count) {
     if (count > 1) {
       $(this).html($('<div class="video3">').html($(this).html()));
     }
  });

または、それがビデオ行であるかどうかを確認する必要があるかもしれませんか？質問ではあまり明確ではありません。

于 2012-10-21T15:12:57.790 に答える