title: jQuery Cycle: Multiple slide shows, count individual children
body: <p>I'm using jQuery Cycle to create several slideshows on the same page. Some of the slideshows only have one image. For these, I would like to hide the next/prev image. Not sure why this code isn't working, but I suspect it is counting <em>all</em> the children of all the slideshows. If this is the case, I need it to calculate each slideshow length individually. <a href="http://jsfiddle.net/QtY3E/" rel="nofollow">JSFiddle here</a></p>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>if ( $('.slideshow').children().length &lt; 1 )
      $(this).parent().find('.controls').hide();
  else
  $('.slideshow').each(function() {
      var cycle = $(this),
      controls = cycle.parent().find('.controls');
      cycle.cycle({
          timeout: 0,
          speed: 'fast',
          fx: 'scrollHorz',
          next: controls.find('.next'),
          prev: controls.find('.prev'),
          before: function(curr,next,opts) {
                      var s = ($(next).index() + 1) + '/' + opts.slideCount;
                      $(opts.caption).html(s)
                  },
          caption: cycle.parent().find('p.caption'),
      });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;div class="container"&gt;
      &lt;ul class="slideshow"&gt;
          &lt;li&gt;&lt;img alt="product" src="http://placehold.it/500x500" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img alt="product" src="http://placehold.it/500x500" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img alt="product" src="http://placehold.it/500x500" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="controls"&gt;&lt;a href="#" class="prev"&gt;Prev&lt;/a&gt; &lt;a href="#" class="next"&gt;Next&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;ul class="slideshow"&gt;
          &lt;li&gt;&lt;img alt="product" src="http://placehold.it/500x500" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="controls"&gt;&lt;a href="#" class="prev"&gt;Prev&lt;/a&gt; &lt;a href="#" class="next"&gt;Next&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>