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 中的标题，以便在 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>

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

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 小提琴演示。

以下版本使用 an 上升到第一个元素，id然后将其所有内部 html 包装在另一个div中videoN（其中 N 显然是一个数字）：

$('.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()));

Something like that, but I should check for some weak points

EDIT:

if you need to skip first 2 rows:

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

Or may be you need to check if it is a video row or not? Not very clear by the question.

于 2012-10-21T15:12:57.790 回答