javascript - 你将如何编写一个 jQuery 函数来返回一个没有溢出其父元素的元素数组？

Question

我有一个包含元素，它被设置为溢出，隐藏了一个溢出容器的 UL。我将如何获得可见的 li？

我的标记:

<div class="dm-similar-photos-content-container">
    <ul class="carousel" style="left: 0px;">
        <li class="dm-image">
            <img data-photoid="1" src="http://lorempixel.com/150/150/food/1">
        </li>

        <li class="dm-image">
            <img data-photoid="2" src="http://lorempixel.com/150/150/food/2">
        </li>

        <li class="dm-image">
            <img data-photoid="3" src="http://lorempixel.com/150/150/food/3">
        </li>

        <li class="dm-image">
            <img data-photoid="4" src="http://lorempixel.com/150/150/food/4">
        </li>

        <li class="dm-image">
            <img data-photoid="5" src="http://lorempixel.com/150/150/food/5">
        </li>

        <li class="dm-image">
            <img data-photoid="6" src="http://lorempixel.com/150/150/food/6">
        </li>

        <li class="dm-image">
            <img data-photoid="7" src="http://lorempixel.com/150/150/food/7">
        </li>

        <li class="dm-image">
            <img data-photoid="8" src="http://lorempixel.com/150/150/food/8">
        </li>

        <li class="dm-image">
            <img data-photoid="9" src="http://lorempixel.com/150/150/food/9">
        </li>

        <li class="dm-image">
            <img data-photoid="10" src="http://lorempixel.com/150/150/food/10">
        </li>

    </ul>
</div>


<div>
    <a class="left">
        <- Left
    </a>
    <a class="right">
        Right ->        
    </a>    
</div>

我的风格:

.dm-similar-photos-content-container {
    margin: 0 30px;
    overflow: hidden;
    width: 335px;
}
.carousel {
    margin: 0;
    padding: 0;
    position: relative;
    width: 9999px;
}
.dm-similar-photos-content-container .dm-image {
    margin: 13px 27px 13px 0;
}

.dm-image {
    float: left;
    list-style: none outside none;
    margin: 16px 16px 0 0;
    position: relative;
}


.dm-image img {
    border: 2px solid #7F8886;
}

最后是简单的左右JS:

jQuery('.left').on('click', function() {
    jQuery(".carousel").animate({
        left: "-=181"
    });
});

jQuery('.right').on('click', function() {
    jQuery(".carousel").animate({
        left: "+=181"
    });
});

你可以在这里看到:http://jsfiddle.net/GGhUF/

Answer 1

一般的方法是判断元素是否位于其父元素的边界框内，这可以使用它们各自的宽度和偏移量来计算。将所有这些合并到一个自定义选择器中的最佳方式:

jQuery.extend(jQuery.expr[':'], {
    inparent: function(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 visibleli = $('li:inparent');

这显然可以从一些优化中获益(比较宽度等后提前退出)，但我会让你解决这个问题。

这是一个演示:http://jsfiddle.net/DDRYj/