0

使用以下 HTML，我只需要定位其中包含 4 个或更少项目的轮播，即本示例中的第二个：

    <div class="book_carousel">
        <h2 class="type_one">Carousel 1</h2>
        <a class="prev disabled">Previous Item</a>
        <div class="scrollable">
            <div class="items">
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
            </div>
        </div>
        <a class="next">Next Item</a>
    </div>
    <div class="book_carousel">
        <h2 class="type_one">Carousel 1</h2>
        <a class="prev disabled">Previous Item</a>
        <div class="scrollable">
            <div class="items">
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
                <div class="item">
                    <a href="http://www.place.com" class="thumb"><img src="image.jpg"></a>
                    <p>Info</p>
                    <a class="button" href="#">LOOK</a>
                </div>
            </div>
        </div>
        <a class="next">Next Item</a>
    </div>

一旦我掌握了其中包含四个或更少项目的 div，我的想法是我将关闭轮播，因为它不是必需的

4

1 回答 1

2

尝试这个：-

过滤掉.book_carousel4 或更少的div.item并做一些事情。filter 将返回小于或等于 4 的轮播 div .items。

演示

$('.book_carousel').filter(function(){
       return $(this).find('div.item').length <= 4;
}).hide(); // Do hide or remove or something with them.
于 2013-05-15T00:49:18.363 回答