将 img 元素向上移动 dom 用于多篇博文

Question

您好，我想执行以下操作：

我目前正在使用商业催化剂作为我的框架。他们有一个博客模块，在博客列表方面几乎没有任何定制。他们有一个预览博客 post 的预览标签，我只渲染了 post 中出现的第一张图片，没有别的。

默认情况下，如果我将图片放在博客顶部 post，BC 将只渲染照片。如果我不放照片，BC 将渲染一半的博客 post - 这很愚蠢。不管什么情况我只想要第一张图。

这需要在 BC 呈现 post 之前发生。

我怎样才能做到这一点？

这是之前的：

<div class="blog1"><p>text</p><img src="#"></div>

这是在：

之后

<div class="blog1"><img src="#"><p>text</p></div>

Answer 1

在呈现之前真正做到这一点的唯一方法是在服务器端处理它。如果您无权访问，您可以在 header:

中添加样式规则

<style>
    .blog1{
        display: none;
    }
</style>

然后做一个js函数按照你想要的方式渲染然后显示：

(function($, window){
    function moveImages(){
        var $blogs = $('.blog1');

        $blogs.each(function(){
            var $this = $(this);
            var $img = $this.find('img:first');

            $this.append($img);

        });
    }

    $(window).on('load', moveImages);
})(jQuery, window);

将 img 元素向上移动 dom 用于多篇博文

Moving the img element up the dom for multiple blog posts

javascript

jquery

business-catalyst