dom - JQuery: Target div with identical class name via how many children/descendents it has -


using following html , need target carousels have 4 or less items in them, ie second 1 in example:

    <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> 

once i've got hold of div 4 or less items in it, idea i'll turn off carousel wouldn't neccessary

try this:-

filter out .book_carousel has 4 or less div.item , something. filter return carousel divs less or equal 4 .items in it.

demo

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

Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -