Question

使用以下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，我的想法是我将关闭旋转木马，因为它不是必要的

Answer 1

试试这个： -

过滤掉{4}或更少.book_carousel的{{1}}并执行某些操作。 filter将返回小于或等于4 div.item的轮播div。

Demo

.items

JQuery：通过它有多少个子/后代来定位具有相同类名的div

1 个答案: