javascript - 将下一个元素添加到 div 前面

Question

我正在尝试将 div (.portrait_text) 添加到容器 (.gallery_container) 中:

每个图像都会添加到其相应的 .gallery_container 前面。但我也想将 每一个 .portrait_text div 添加到它的 .gallery_container 中。有什么想法吗？

<div id="gallery_images_inner" class="clearfix">
    <img src="img/portrait.jpg" alt="portrait" width="850" height="557">
    <div class="portrait_text">Girls After Swim</div>
    <img src="img/gallery5.jpg" alt="gallery5" width="850" height="566">
    <div class="portrait_text">Girls After Swim</div>
</div>

JS:

function Gallery(selector) {
    this.add_module = function (type, image) {
        var container = $('<div />', {
            'class': 'gallery_container'
        }).append(image);

        if (type == 'horizontal') {
            var h_ar = image.attr('height') / image.attr('width');
            var c_width = selector.width();
            var c_height = selector.width() * h_ar
            container.css({
                'width': c_width - 60,
                'height': c_height
            })
        }
        if (type == 'vertical') {
            var c_width = v_width;
            var c_height = v_height
            container.css({
                'width': Math.floor(v_width) - 30,
                'height': v_height
            })
        }
        container.css({
            'float': 'left',
            'overflow': 'hidden'
        })
        container.find('img').attr({
            'width': '100%',
            'height': '100%'
        })
        container.attr('ar', c_height / c_width)
        container.appendTo(selector);

        //container.children('img').fitToBox();
    }
}

Answer 1

如果 image 作为 jQuery 对象传递，正如您的代码似乎建议的那样，您也可以使用 .next() 来选择文本:

function Gallery(selector) {
    this.add_module = function (type, image) {
        var portrait_text = image.next('.portrait_text');
        var container = $('<div />', {
            'class': 'gallery_container'
        }).append(image).append(portrait_text);
        ...
    }
}

当然，这是追加，而您要求前置，但概念是相同的。