JQuery:目标div具有相同的类名通过多少个子/后代它有

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>

一旦我得到了包含4个或更少元素的div，我的想法是关闭carousel，因为这是不必要的

Answer 1

试试这个:-

过滤掉div.item小于等于4的.book_carousel并做一些事情。过滤器将返回小于或等于4个.items的carouseldiv。

演示

$('.book_carousel').filter(function(){
       return $(this).find('div.item').length <= 4;
}).hide(); // Do hide or remove or something with them.