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.
$('.book_carousel').filter(function(){ return $(this).find('div.item').length <= 4; }).hide(); // hide or remove or them.
Comments
Post a Comment