jquery - オーバーフローが非表示の場合、可視画像のみを取得します

Question

画像として示されているhtml構造があります。コンテナがオーバーフロー非表示に設定されている場合、完全に表示されていない画像 (最後の行) を取得する方法はありますか? 隠されている画像を取得できます。

Answer 1

このカスタム セレクターを使用して、親をオーバーフローしていない要素を見つけることができます。

jQuery.extend(jQuery.expr[':'], {
    inparent: function(el) {
        var $el = $(el),
        parent = $el.parent();
        if ($el.offset().top >= parent.offset().top && 
            $el.offset().top + $el.outerHeight(true) <= parent.offset().top + parent.outerHeight(true) && 
            $el.offset().left >= parent.offset().left && 
            $el.offset().left + $el.outerWidth(true) <= parent.offset().left + parent.outerWidth(true)) 
        {
            return true;
        }
        return false;
    }
});

次に、以下を使用して、部分的または完全に非表示になっている画像を見つけることができます。

var visibleimg = $('#container > img:not(:inparent)');