我正在为 WordPress 博客编写自定义页面。 PHP 会动态注入(inject)大量内容。我必须使用 jQuery 将一些 CSS 类添加到动态创建的 html 标签中。我被这个问题困住了...
我如何用 div 包装我的用户将在此 WordPress 页面上创建的这些“重复视频 block ”?
一些注意事项: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 网站上的 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>
最佳答案
这应该可以满足您的要求。
$(".1").each(function(){
$(this).nextUntil(".1").addBack().wrapAll("<div class='wrapper'>");
});
关于javascript - 如何用javascript包装重复的html block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19482297/