3

コンテナーをオーバーフローする 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/

4

1 に答える 1

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/

于 2012-11-20T20:42:06.800 に答える