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中的标题，以便在1个视频帖子中手动合并它们，其中包含3个视频，我们的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视频块上添加计数。

编辑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可以是网站第二页上的row1。

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进入第一个元素，然后使用div将其所有内部html包装在另一个videoN中（其中N显然是一个数字）：

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

JS Fiddle demo

参考文献：

Answer 2

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

类似的东西，但我应该检查一些弱点

编辑：

如果您需要跳过前两行：

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

或者您可能需要检查它是否是视频行？这个问题不太清楚。

生成的div的数字和包装？

2 个答案: