Question

我有一个图像列表，我想在div中包装每2个图像。但是，如果图像是风景图像，我想将其包装在自己的div中。

到目前为止，这是我的代码，它正在为肖像工作，但它也包围了风景。

$("#dps-inner").find('img').each(function (i) {
    jQuery(this).height(600);
    jQuery(this).width('auto');

    $(this).load(function () {
        var width = jQuery(this).width();
        //console.log(width);
        var height = jQuery(this).height();

        if (width > 600) {
            jQuery(this).addClass("landscape");
        }
        else {
            jQuery(this).addClass("portrait");
        }

        accum_width += width + 1
        $("#dps-inner").width(w * i);
    });
});

var images = $("#dps-outer").find("#dps-inner > img");

for (var i = 0; i < images.length; i += 2) {
    images.slice(i, i + 2).wrapAll("<div class='images'></div>");
}

我也试过

var images = $("#dps-outer").find("#dps-inner > img.portrait");

for (var i = 0; i < images.length; i += 2) {
    images.slice(i, i + 2).wrapAll("<div class='images'></div>");
}

甚至

var images = $("#dps-outer").find("#dps-inner > img");

for (var i = 0; i < images.length; i += 2) {
    if (images.width() < 600) {
        images.slice(i, i + 2).wrapAll("<div class='images'></div>");
    }
}

我不确定自己做错了什么，一旦完成所有事情，我都尝试打开风景图片，但这也不起作用，就像那里一样＃＆＃＆＃ 39;没有回调，一切都在同一时间完成。

有人有什么建议吗？

我的小提琴不能上班，因为屏幕需要更宽，但也许你可以在另一个窗口打开它，它只是想知道我想要做什么

http://jsfiddle.net/tara_irvine/r46XA/

Answer 1

如果我理解正确，请执行以下操作：

var outer = $("#dps-outer");

  // wrap adjacent .portrait elements
outer.find("#dps-inner > img.portrait + img.portrait").each(function() {
    var prev = $(this).prev('img.portrait');
    if( prev.length ) {
        prev.add( this ).wrapAll("<div class='images'></div>");
    }
});

  // wrap .landscape elements
outer.find("#dps-inner > img.landscape").wrap("<div class='images'></div>");

  // wrap any lingering .portrait elements 
  //   (usually an odd one between a pair of portraits, and a landscape)
outer.find("#dps-inner > :not(img.portrait) + img.portrait").wrap("<div class='images'></div>");

~~唯一不做的是处理奇数portrait图像。你需要描述如何处理这些。~~

我只是假设你想让奇怪的.portrait独立包装，而不是重新定位。

JSFIDDLE DEMO 更改了演示，以便更容易直观地显示结果。

或者像这样消除DOM选择：

var outer = $("#dps-outer");

outer.find("#dps-inner > img.portrait + img.portrait")
    .each(function() {
        var prev = $(this).prev('img.portrait');
        if (prev.length) {
            prev.add(this).wrapAll("<div class='images'></div>");
        } else if( !$(this).next('img.portrait').length ) {
            $(this).wrap("<div class='images'></div>");
        }
    });

outer.find("#dps-inner > img.landscape").wrap("<div class='images'></div>");

JSFIDDLE DEMO

Answer 2

只需检查高度是否大于宽度，即纵向。宽度大于高度=＆gt;景观？所以你应该像这样改变600到高度：

 if (width > height) {
     jQuery(this).addClass("landscape");
 } else {
    jQuery(this).addClass("portrait");
 }

Answer 3

$.fn.isPortrait = function(){
    var elem = this[0];
    if (elem && elem.tagName.toLowerCase() == 'img') {
        return elem.width < elem.height;
    }
    return;
};
$.fn.isLandscape = function(){
    var elem = this[0];
    if (elem && elem.tagName.toLowerCase() == 'img') {
        return elem.width < elem.height;
    }
    return;
};

$.extend($.expr[':'], {
    portrait: function(el){
        if (el && el.tagName.toUpperCase() == 'IMG'){
            return el.height > el.width;
        }
        return false;
    },
    landscape: function(el){
        if (el && el.tagName.toUpperCase() == 'IMG'){
            return el.width > el.height;
        }
        return false;
    }
});

增加了一些图像灵活性。你现在可以抓住：

// NOTE: For any of these to work, the image would needs to be already loaded,
// or the height/width attributes would need to be supplied. Otherwise, this will
// be making decisions on the absence of information.

// returns status on FIRST image element found in collection
$('img').isPortrait();  // returns if the image is portrait
$('img').isLandscape(); // returns if the image is landscape

// Filters all images found
$('img:portrait');      // filters for only portrait images
$('img:landscape');     // filters for only landscape images

从那里开始，回到原来的问题：

$('img:landscape').wrap('<div/>',{class:'landscapeOnly'});
$('#dps-inner img:portrait:nth-child(2n-1)').each(function(a){
  $(this).add($(this).next('p')).wrapAll('<div/>');
});

如果它是肖像，则将div中的每个第二个图像换行

3 个答案: