jquery - 生成的 div 的数字和换行？

Question

我有一个 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”是视频，第二页是文字文章。基本上，我们在每个页面上固定了 5 行，内容是动态进入的。

我认为 jquery 有一种方法可以定位“video_image”类，这是唯一指向此处的页面行中的视频内容，并设法将“video_image”上方的所有内容包装到名为“video1”的 div .另一个步骤是在 1、2 和 3 视频 block 上添加计数。

编辑 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>

这对我也有好处，但正如我之前提到的，第 4 行可以是网站第二页上的第 1 行。

Answer 1

根据更新的信息，我建议:

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

JS Fiddle demo .

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

JS Fiddle demo .

以下版本上升到具有 id 的第一个元素，然后将其所有内部 html 包装在另一个具有 videoN 的 div 中(其中 N 显然是一个数字):

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

JS Fiddle demo .

引用资料:

• > attr() .
• > closest() .
• > html() .
• > parent() .
• > wrap() .