javascript - 将 img 元素向上移动到多篇博客文章的 dom

Question

您好，我想做以下事情：

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

默认情况下，如果我将图像放在博客文章的顶部，BC 只会渲染照片。如果我不放照片，BC 会渲染一半的博文——这很愚蠢。无论在什么情况下，我都只想渲染第一张照片。

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

我怎样才能做到这一点？

这是之前的：

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

这是之后：

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

Answer 1

The only way to do it truly before it renders is handle it on server side. If you don't have access to that you can put a style rule in your header:

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

and then make a js function to render it the way you want and then display it:

(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);